[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