v12.2 up to v12.3.2-canary.22 handleHardNavigation Invariant: attempted to hard navigate to the same URL

Verify canary release

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

Provide environment information

Deployed to Vercel

Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Pro
    Binaries:
      Node: 16.13.1
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 12.3.2-canary.22
      eslint-config-next: 12.3.1
      react: 18.2.0
      react-dom: 18.2.0

What browser are you using? (if relevant)

Not relevant

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

It seems that since Next.js v12.2 the internal router does an extra fetch for the current page.js. This didn’t happen in the older versions of Nextjs (see screenshots below). If the current URL is a dynamic route and is rewritten (our case in Middleware) the extra page.js fetch will result in a 404. This causes an attempt to reload the current page which then runs into the handleHardNavigation error Invariant: attempted to hard navigate to the same URL.

Current production Next.js v12.1:

Develop Next.js v12.2:

Expected Behavior

Should just load the page without errors.

Link to reproduction

https://router-3zllgxvkw-fdmediagroep.vercel.app/nieuws

To Reproduce

Minimal reproduction repo: https://github.com/FDMediagroep/router-bug

Next Middleware rewrite rules:

    ...
    {
      source: /^\/nieuws$/,
      destination: '/nieuws/overview/1',
    },
    {
      source: /^\/nieuws\?page=(?<pageNr>\d+)/gi,
      destination: '/nieuws/overview/$<pageNr>',
    },
    ...

Navigating to /nieuws will result in the error as described in the bug description for Next.js since v12.2. But not on the older version v12.1.

[willemliufdmg]

This issue has been closed but the problem has not been resolved.

[bramvdpluijm]

Currently experiencing this issue as well when not using any _middleware.