SSR + custom 404 page + middleware on 12.2 causes client-side navigations between deployments to display a 404

Verify canary release

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

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.2.0: Sun Nov 28 20:28:41 PST 2021; root:xnu-8019.61.5~1/RELEASE_ARM64_T6000
Binaries:
  Node: 16.15.0
  npm: 8.5.5
  Yarn: 1.22.19
  pnpm: 7.0.0-rc.7
Relevant packages:
  next: 12.2.4-canary.0
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Brave 1.41.100 Chromium: 103.0.5060.134 (Official Build) (arm64)

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

Nextjs router is unable to properly perform client side navigations after a fresh deployment is published in projects that use SSR, custom 404 page, and with any middleware function. If a user loads a page, then a deployment happens, then the user attempts to navigate, they will be presented with the custom 404 page. Refreshing the page will correctly display the server rendered page they attempted to navigate to.

Expected Behavior

As in next@12.1.x, the router should perform a hard navigation to the target page with the latest deployment.

Link to reproduction

https://github.com/bryanrsmith/simple-app

To Reproduce

https://github.com/bryanrsmith/simple-app is a simple app with two pages that use SSR. Also note that a custom 404 page is defined, and the project has a middleware function that does nothing (immediately returns NextResponse.next()).

1. Deploy this project to vercel.
2. Load the site in a new browser tab, but do not click any links.
3. Redeploy the project (either a trivial code change, or use the Vercel dashboard to redeploy).
4. Return to the original browser tab without refreshing it.
5. Click the link to the other page, and then click the link back to the home page.

Expected: The navigations should succeed. Actual: The custom 404 page is shown.

While viewing the errant 404 page, a hard refresh will successfully display the server rendered page.

[bryanrsmith]

Confirmed. Thank you!

[ijjk]

Hi, this has been updated in v12.2.4-canary.6 of Next.js, please update and give it a try!