ModuleNotFoundError: Module not found: Error: Can't resolve 'next/server' - node.js

Question

I just cloned the Next Auth Example, changed ports in package.json to match my server and added my domain in .env.local. Because of WASM middleware in Next 12, I had to downgrade to Next 11, so I just edited package.json to "next": "^11.1.3" and ran npm i again.
When I try to npm run build, I get this error:
ModuleNotFoundError: Module not found: Error: Can't resolve 'next/server' in 'domain.com/pages'
The npm run dev works fine.
The page that has the server import is:
https://github.com/nextauthjs/next-auth-example/blob/main/pages/_middleware.js
import { getToken } from "next-auth/jwt"
import { NextResponse } from "next/server"
/** #param {import("next/server").NextRequest} req */
export async function middleware(req) {
if (req.nextUrl.pathname === "/middleware-protected") {
const session = await getToken({
req,
secret: process.env.SECRET,
secureCookie:
process.env.NEXTAUTH_URL?.startsWith("https://") ??
!!process.env.VERCEL_URL,
})
// You could also check for any property on the session object,
// like role === "admin" or name === "John Doe", etc.
if (!session) return NextResponse.redirect("/api/auth/signin")
// If user is authenticated, continue.
}
}
Full Log:
> next-auth-example#0.0.0 build /domain.com
> next build
info - Loaded env from /domain.com/.env.local
info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info - Checking validity of types
warn - No ESLint configuration detected. Run next lint to begin setup
info - Creating an optimized production build
Failed to compile.
ModuleNotFoundError: Module not found: Error: Can't resolve 'next/server' in 'domain.com/pages'
> Build error occurred
Error: > Build failed because of webpack errors
at domain.com/node_modules/next/dist/build/index.js:397:19
at async Span.traceAsyncFn (domain.com/node_modules/next/dist/telemetry/trace/trace.js:60:20)
at async Object.build [as default] (domain.com/node_modules/next/dist/build/index.js:77:25)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! next-auth-example#0.0.0 build: `next build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the next-auth-example#0.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! domain.com/.npm/_logs/blahblahblah-debug.log // I edited this line
package.json
{
"name": "authentication",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"author": "damn",
"license": "ISC",
"dependencies": {
"next": "^11.1.2",
"next-auth": "^4.1.2",
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
}
(removed -p since it had no effect in my environment)
What's causing the problem and how should I solve it?

Answer 1

Middleware as a concept was introduced with NextJS 12 - See here - https://nextjs.org/blog/next-12#introducing-middleware
For your usecase, see here and follow the api routes example.