not-found.tsx <Link> not working

[josias-r]

Summary

I'm experiencing this weird behaviour what in my not-found.tsx <Link> components are not working.

This is actually not all the time, but for only for pages that really dont exist. For example /this-page-does-not-exist. If I go to /this-page-exists and in there I use the notFound() method, the NotFound page is displayed, but this time, links are working.

Maybe related to this: Also the meta viewport is missing under the exact same condition (I added it now to the root layout as a workaround).

Seems like notFound() pages work differently from /reallydontexist pages.

Additional information

No response

Example

No response

[devjiwonchoi]

You are right, since notFound returns NEXT_NOT_FOUND error with 404 status continuously, which terminates rendering routed pages. It is why you need to re-request (refresh) the page in order to render the page from the link URL.

Invoking the notFound() function throws a NEXT_NOT_FOUND error and terminates rendering of the route segment in which it was thrown.

ref: https://nextjs.org/docs/app/api-reference/functions/not-found

[josias-r]

@devjiwonchoi I'm not sure I fully understand.
using notFound() works great, and no refresh is needed after pressing a link to a page.

But for a real 404, which simply does not exist, pressing a link does NOT redirect, only update the URL without rerendering.

Why should they behave differently?

[devjiwonchoi]

404.js is a legacy from the Page Router, and for the App Router it is recommended to use not-found.js.
Referring to your statement,

using notFound() works great, and no refresh is needed after pressing a link to a page

this should not be true since notFound() function terminates rendering of the route segment,
which allows the Link component to redirect to the URL but does not render the expected page.
Also, whether you call the notFound() method or not, Next.js will show the root app/not-found.js page
when the user tries to access any non-generated pages.

Screen.Recording.2023-05-17.at.10.31.38.AM.mov

As summary, not-found.js is recommended over 404.js, and using the Link component allows
moving to the URL but does not render the page.

[josias-r]

@devjiwonchoi I am not using a 404.js page. I am using a not-found.tsx page

Screen.Recording.2023-05-17.at.08.37.09.mov

Currentyl, for / I always manually return notFound(). And navigation works. (Sorry I just realized I swapped it around in my last message). But when going to a real /not-exist, the navigation breaks (and also the viewport meta tag is missing)

[icyJoseph]

There's a fix on the making for this:

• similar discussion When not-found page is displayed, Navigating to an existing page continues to show not-found page. #49516
• issue report [NEXT-963] fix not-found on navigation (prod/dev) #47862
• potential fix Reset not-found and error boundary when navigating #49855

[josias-r]

Yup all my cases are working with the same root layout in my case.

Note that I am talking about the devaul viewport meta tag. Next adds a default viewport meta tag if you don't specify any.

Now that I added a viewport tag to my root layout, both the notfound and reallynotfound pages have it

[icyJoseph]

Sounds like a bug then, doesn't it? if it is added by default, except for a given sub route... I couldn't find much in the issues

[josias-r]

@icyJoseph Aight, I will open an issue for it :)

[josias-r]

#49979

[icyJoseph]

Awesome, they fixed it really quick!

[columk1]

I'm still seeing this issue but I haven't been able to pin down what's causing it.

When I call notFound() from a page when the dynamic path doesn't exist, I get a 404 response and see a white screen, but all of the markup from not-found is there in the source.

If I wrap the children of the main layout (where not-found renders) in a Suspense boundary, I get a 200 response and the not-found component does render but the Link components on the page don't work. They trigger requests but the browser doesn't change route.

I have error boundaries but they're not triggered, and there are no console errors apart from the 404.

[devjiwonchoi]

Hi @columk1, could you open a new issue with a repro? I'll be happy to take a look.

[columk1]

Thanks, I found the bug: a deeply nested component in my layout was calling router.refresh on mount.

When I removed the suspense boundary that caused the Links to stop working in not-found, this caused an infinite loop in production, as the not-found page alternated between requesting /foo and /foo?rsc={id}.

Adding back that main suspense boundary and then wrapping the component that calls router.refresh in suspense solved the Link issue.