I'm trying to implement simple middleware for auth routes in Next.js 12.1.6. It's supposed to check for authentication headers, validate tokens and proceed accordingly.

Looking at some examples online, seems like it should return NextResponse.next() to proceed (like calling next() in Express) and new Response() if we don't want the request to complete. Returning new Response() is working fine but NextResponse.next() throws TypeError: resolver is not a function

// _middleware.ts
import { NextFetchEvent, NextRequest, NextResponse } from "next/server"

const authMiddleware = async (req: NextRequest, ev: NextFetchEvent) => {
    if (validated) {
       return NextResponse.next()
     } else {
       return new Response("Unauthorized")
     } 
    }

export default authMiddleware

I have tried NextResponse.rewrite() using req.page.name but using a dynamic url doesn't work. NextResponse.redirect() creates an infinite loop.

Seems like the problem is in my local setup, thanks to Mark for figuring that out.

Here's some more details:

Call Stack

Call Stack
Object.apiResolver
file:/Users/adk/Projects/myproject/nextjs/node_modules/next/dist/server/api-utils/node.js (185:15)
runMicrotasks
<anonymous>
processTicksAndRejections
node:internal/process/task_queues (96:5)
async DevServer.runApi
file:/Users/adk/Projects/myproject/nextjs/node_modules/next/dist/server/next-server.js (395:9)
async Object.fn
file:/Users/adk/Projects/myproject/nextjs/node_modules/next/dist/server/base-server.js (496:37)
async Router.execute
file:/Users/adk/Projects/myproject/nextjs/node_modules/next/dist/server/router.js (226:36)
async DevServer.run
file:/Users/adk/Projects/myproject/nextjs/node_modules/next/dist/server/base-server.js (606:29)
async DevServer.run
file:/Users/adk/Projects/myproject/nextjs/node_modules/next/dist/server/dev/next-dev-server.js (450:20)
async DevServer.handleRequest
file:/Users/adk/Projects/myproject/nextjs/node_modules/next/dist/server/base-server.js (321:20)

Next.js version: 12.1.6, Node version: 16.15.1

File structure

nextjs
├── package.json
├── next.config.js
├── tsconfig.json
├── pages
│   ├── _app.tsx
│   ├── api
│   │   └── auth
│   │       ├── _middleware.ts
│   │       └── login.tsx
│   └── index.tsx

I'm confused as to why NextResponse.next() is not working for me, and would really appreciate help with implementing next(). Thank you.