v12.2.x Middleware is invoked multiple times for a page for the same route request

[bennettdams]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Fri Apr 2 22:23:49 UTC 2021
Binaries:
  Node: 16.15.0
  npm: 8.5.5
  Yarn: 1.22.15
  pnpm: N/A
Relevant packages:
  next: 12.2.2
  eslint-config-next: 12.2.2
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Chrome & Firefox

Describe the Bug

When using Middleware for a page, it is invoked multiple times for the same route request.

Here's a very basic example, an app with another /test route. In the Middleware, we log whenever it is invoked by a request for this page:

// Note: I'm using a root wildcard here, because in my code, I want to protect every single route for authentication
export const config = {
  matcher: ["/:path*"],
};

export default async function _middleware(req: NextRequest) {
  const pathname = req.nextUrl.pathname;

  if (pathname === "/test") {
    console.log(`🔵 ${new Date().toISOString()} | Request for "Test" page | Method: ${req.method}`);
  }

  return NextResponse.next();
}

Going to this page in the browser, the result is two console.logs, even though it should be one:

---

There is a similar recent issue, but there, the problem were HEAD requests. Looking at my example, the double invocation is done with two GET requests, so I think this issue is not related (or not fixed with whatever was the problem there).

Expected Behavior

Only one invokation per page request.

Link to reproduction

https://github.com/bennettdams/nextjs-middleware-invocation-bug

To Reproduce

Here is a reproduction repo you can use.

Or, here are the steps to manually reproduce the issue:

1. Install via npx create-next-app@latest --ts --use-npm .

2. Add a test page

   // test.tsx
   import { NextPage } from "next/types"
   
   const Test: NextPage = () => {
       return <p>Test</p>
   }
   
   export default Test

3. Add Middleware that logs whenever it is invoked for our new Test page

   // middleware.ts
   import { NextRequest, NextResponse } from "next/server";
   
   // Note: I'm using a root wildcard here, because in my code, I want to protect every single route for authentication
   export const config = {
     matcher: ["/:path*"],
   };
   
   export default async function _middleware(req: NextRequest) {
     const pathname = req.nextUrl.pathname;
   
     if (pathname === "/test") {
         console.log(`🔵 ${new Date().toISOString()} | Request for "Test" page | Method: ${req.method}`);
     }
   
     return NextResponse.next();
   }

4. npm run build and npm run start

5. Go to /test in the browser. Reload the page.

---

I experienced this behavior for v12.2.0, v12.2.1 and v12.2.2.

As a comparison, I also checked this for v12.1.6. There, this problem does not exist. There's only one invocation as expected. To reproduce in the same repo:

1. npm i next@12.1.6
2. Rename middleware.ts to _middleware.ts and move it to the "pages" folder.

[andrewfritz86]

I am seeing this as well, middleware being called multiple times per request.

[ijjk]

Closing as a duplicate of #38267

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.