[NEXT-963] fix not-found on navigation (prod/dev)

[TheEdoRan]

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 Jan 27 02:56:13 UTC 2023
    Binaries:
      Node: 18.14.2
      npm: 9.6.3
      Yarn: 1.22.19
      pnpm: 8.1.0
    Relevant packages:
      next: 13.2.5-canary.28
      eslint-config-next: 13.2.4
      react: 18.2.0
      react-dom: 18.2.0

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

App directory (appDir: true)

Link to the code that reproduces this issue

https://github.com/TheEdoRan/nextjs-appdir-notfound-bug

To Reproduce

Import a CSS file in the root layout.tsx. Then create a not-found.tsx page inside app/ dir, and navigate to a non-existent page.

Describe the Bug

When navigating to a non-existent page, the HTML content of not-found.tsx shows up correctly, but CSS doesn't load.
Furthermore, clicking on a <Link /> updates the current URL in the browser, but the page does not refresh, so the not-found body is still displayed.

If the CSS file is also imported in not-found.tsx, when navigating to a non-existent page the browser "flashes" the correct not-found page, but then it immediately switches to a blank render.

After a bit of research, I found out that the bug first appeared in v13.2.5-canary.22, in canary.21 the not-found page works as intended.

Expected Behavior

not-found page applies styles and refreshes the page when clicking on a <Link />.

Which browser are you using? (if relevant)

Chrome 111.0.5563.147

How are you deploying your application? (if relevant)

No response

_NEXT-963

[huozhi]

I've partically fixed this issue in #47992, only the CSS part of it. Will edit the title to narrow down on the Link issue and keep tracking

[sanskar-19]

@timneutkens Can you please update us on the issue and when its patch is gonna come?

[Afrozefathima]

For me none of the Link works in production. Working only in development after upgrading from next js 12 to 13.4.2

[grzegorzpokorski]

For me none of the Link works in production. Working only in development after upgrading from next js 12 to 13.4.2

@Afrozefathima If I'm not wrong, this issue has been resolved in the 13.4.4 release, so you have to upgrade to the latest version, I think.

[Afrozefathima]

I already upgraded it. Yet not working for me. I ran codemods which added legacy behaviour again but it showed multiple children error and cleared it again manually.

[mhesham32]

this problem still exists if I tried to navigate using router.push() . I'm using not-found in case my api/route returned an empty result but then if the endpoint returned results the not-found page should disappear and the results should be displayed instead.

if(results === null) return notFound();

... display results

is this a good way to use not-found page?

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