next.js: [NEXT-1150] [Bug] next/link navigation broken after adding a `not-found` page

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 22.4.0: Mon Mar  6 20:59:28 PST 2023; root:xnu-8796.101.5~3/RELEASE_ARM64_T6000
    Binaries:
      Node: 16.20.0
      npm: 8.19.4
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.3.1-canary.6
      eslint-config-next: 13.3.0
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue

https://github.com/jahirfiquitiva/not-found-links-repro/

To Reproduce

Create a not-found page and use Link from next/link to navigate to a non-existent page.

Or visit https://not-found-links-repro.vercel.app/

Describe the Bug

After creating a not-found file/component/page…

When navigating to a page that does not exist, using next/link, the UI does not change.

When navigating, from not-found, to a page that actually exists, using next/link the UI does not change (still shows not-found).

This is “fixed” by using a simple html <a> tag, but I would like to keep using next/link

I’m not sure if the issue #42991 is related, but seems similar. Although from my reproduction, the error happens with normal pages too, not just dynamic.

Here’s a video showing the issue:

https://user-images.githubusercontent.com/10360816/231920790-1198805f-cf1a-4e01-b710-b22d224c5dc1.mp4

Expected Behavior

Navigating to any route using next/link should make the page render the actual content of the page if it exists, otherwise, render the not-found component, but allow to navigate to another existing page and render its actual content.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

Vercel

_NEXT-1150

About this issue

Original URL
State: closed
Created a year ago
Reactions: 13
Comments: 17 (2 by maintainers)

Most upvoted comments

This bug is also in 13.3.0

<Link href="/" >Home</Link> in a not-found.tsx just doesn’t work. It changes the URL, but not the content.

jonmountjoy on Apr 15, 2023

Verified the provided reproduction is fixed on stable: https://vpxc95-3000.csb.app/

Related PRs: #50047, #49855

timneutkens on May 31, 2023

I have the same issue today with both the stable release of the app dir (next 13.4.1). When I navigate to a page that doesn’t exist, the URL updates correctly but the UI stays at the same page I was at.

For example, from “/”, I navigate to “/xyz” (which doesn’t exist. The URL updates to “/xyz” but the UI shown is from “/”. Only if I refresh the page, it’ll show the UI of the not-found.js in my app dir.

Similarly, when I’m inside “/xyz” URL and the ‘not-found.js’ UI is showing, hitting back on the browser will update the URL to “/”, but the UI remains to be from ‘not-found.js’. Only if I manually refresh the page, it’ll properly show the UI from “/”.

Would love to see a fix soon. I definitely cannot use this for production. Right now, I’m seriously thinking of sticking with the pages directory for now since the app dir doesn’t seem stable at all even though it has a stable release already.

Thank you!

Here’s a minimal reproduction in case it’s helpful for the team: https://github.com/JasonA-work/next13-not-found-bug

JasonA-work on May 11, 2023

This doesn’t seem to be happening for dynamic routes. So if you add a app/[...fallback]/page.tsx and give it this

import { notFound } from "next/navigation";

// temp fix for this issue:
// https://github.com/vercel/next.js/issues/48367
export default function ForceDynamicNotFound() {
  return notFound();
}

export const dynamic = "force-dynamic";

Then next/link should work in not-found.tsx again. But mind you, this will cause a minor invocation every time you have a 404 hit.

EthanStandel on May 4, 2023

Still happening. Breaks the whole website.

WoLfulus on Apr 28, 2023

This is still happening with Next.js 13.3.1 😫

jahirfiquitiva on Apr 22, 2023

thank you @timneutkens 😀

jahirfiquitiva on May 31, 2023

i see, thank you for the detailed explanation @EthanStandel 😀

jahirfiquitiva on May 4, 2023

this will cause a minor invocation

@EthanStandel mind elaborating? i don’t understand this part 😬

If you’re running on Vercel or Netlify, then serving your 404 as an effectively static page is suuuuper cheap and puts almost no data & compute time towards your quotas. But this will make it so that this one-line function has to be triggered on a lambda every time a user hits a 404 on your site which will use a very small amount of your compute time quota per 404 hit. It probably won’t change anything for most devs/sites, but if you’re having problems keeping under quotas in Vercel/Netlify, this won’t help.

If you’re running Next on a server with next build && next start then this will have almost zero effect on you.

EthanStandel on May 4, 2023