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

[jahirfiquitiva]

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:

Shot.2023-04-13.at.20.24.15.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

[ddcrobert]

In case that can help, a few days ago, I encountered the same kind of issue with latest canary, all my pages are built ahead using export. My links were using next/link component (added before appDir).

After a weekly update, I started receiving report of people not able to navigate due to an error "Application error: a client-side exception...".

It looked like it was trying to perform soft navigation even if I was using export.
Ended up like above, replacing with .

[jonmountjoy]

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.

[jahirfiquitiva]

right @jonmountjoy I forgot to mention I was using 13.3.0 stable... I used the canary when reporting the issue to make sure that it was still there 😅

[jahirfiquitiva]

This is still happening with Next.js 13.3.1 😫

[WoLfulus]

Still happening. Breaks the whole website.

[evowizz]

Looks like @timneutkens mentioned in another issue (#47862 ) that the problem is known and a fix is planned.

#47862 (comment)

[EthanStandel]

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.

[jahirfiquitiva]

this will cause a minor invocation

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

[EthanStandel]

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.

[jahirfiquitiva]

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

[vixero-dev]

I am using window.location.href as a temp workaround for now.

<a onClick={() => (window.location.href = '/')}>BACK TO HOME</a>

[jahirfiquitiva]

@EthanStandel your solution does not work in the case of being in a sub-path

Example:

• going to /blog/404
• clicking on a Link to /blog

this link does nothing

[JasonA-work]

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

[mehediemon007]

https://stackoverflow.com/a/75625136

This works for me!! Check it out.

[timneutkens]

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

Related PRs: #50047, #49855

[jahirfiquitiva]

thank you @timneutkens 😀

[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.