When developing with NextJS, middleware is an important feature. However, different versions of NextJS have different requirements for the location and configuration of middleware files, which may cause the middleware not to be triggered as expected.

Problem Description

The following middleware code was written in the /myproject/pages/middleware.js file:

export function middleware(request) {
  return NextResponse.redirect(new URL("/", request.url));
}
// See "Matching Paths" below to learn more
export const config = {
  matcher: ["/test"],
};

It was expected that when accessing the /test page, it would be redirected to /, but there was actually no reaction, and a standard 404 page was displayed.

Troubleshooting Process

Through research and practice on the documentation of different versions of NextJS, it was found that different versions have specific requirements for the location and configuration of middleware files. The problem may lie in the fact that the location of the middleware file does not meet the requirements of the version.

Solutions

Solution 1: General Case

The latest version of NextJS requires a single middleware.js file to be placed at the same level as the pages folder, that is, change {root}/pages/middleware.js to {root}/middleware.js; if there is a src folder, try using {root}/src/middleware.js.

Solution 2: For Next 13.0.2 / 13.0.1 with appDir (experimental)

  • Place middleware.ts in the project root directory (at the same level as the app folder, not inside the app folder).
  • Ensure that "middleware.ts" is included in tsconfig, that is, include: [..., "middleware.ts"].
  • Create an empty pages folder. The sample code is as follows:
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
export function middleware(request: NextRequest) {
  console.log("lol!!!");
}
export const config = {
  matcher: "/",
};

Summary and Reflection

The root cause of this problem is that different versions of NextJS have different requirements for the location and configuration of middleware files. During the development process, pay special attention to the version of NextJS being used and configure the middleware file according to the requirements of the corresponding version. When encountering problems, consult the official documentation in a timely manner to ensure that the location and configuration of the middleware file meet the version requirements, thereby avoiding similar problems.