404 page isn't server rendered when using notFound() #62228
Labels
bug
Issue was opened via the bug report template.
Navigation
Related to Next.js linking (e.g., <Link>) and navigation.
Comments
github-actions
bot
added
the
Navigation
|
In my case
|
|
@nikcio However I would explain source code detail about this problem for later reference. Firstly, there are three cases for this issue (in this case I only see prod) 1 : calling notFound() with cache strategy For First case, Next.js stores RSC format and HTML format of render result in build phase to cache the result. next.js/packages/next/src/server/lib/incremental-cache/file-system-cache.ts Lines 214 to 223 in 0fcb946 This So how about second case ? next.js/packages/next/src/server/app-render/app-render.tsx Lines 546 to 549 in 0fcb946 And it is maybe intentionally in Next.js implementation. If you find any idea to pass not-found component to empty html body that I mentioned before, you can try that. For last case, if go to page that is not exist, code generates not-found component in runtime below. next.js/packages/next/src/server/app-render/app-render.tsx Lines 436 to 449 in 0fcb946 This is why code generates not empty page with style and html body. Therefore, it is hard at a glance to all provide server side render if notFound is thrown. |
|
We're also being bit by this. In an attempt to migrate from pages to app directory, we were forced to move over our error pages as well, but since we're localizing our app using If we add a |
I solve 404 i18n issues with middleware path header.
export default function NotFound(): JSX.Element {
const headersList = headers();
const pathname = headersList.get("x-pathname");
const locale = getLocaleFromUrl(pathname, true);
return (
/* @ts-expect-error Server Component */
<AppProviders params={{ locale }}>
<PagesError
title="layouts.errors.404.title"
description="layouts.errors.404.description"
/>
</AppProviders>
);
}
export function middleware(request: NextRequest): NextResponse {
// ...
const { nextUrl } = request;
const { pathname } = nextUrl;
requestHeaders.set("x-pathname", pathname);
// ...
}In this case 404 page is SSR. |
|
Hi @huozhi The updated reproduction repo can be found here: https://github.com/nikcio/nextjs-notfound-example/tree/canary-46-test Responses on routesDevelopment (
|
|
Hi, sorry for the confusion that closes the issue by that PR since that fix was more related to the status code. I reopen the issue to avoid it's gonna be locked automatically. Feel free to close it if the explanation makes sense to you. |
|
This is still an issue with the latest canary release. Especially with turbopack and hot reload. |
|
I also found that if we add a custom we are currently temporarly returning a metatag of no index on this not-found page but it would be nice to fix the issue asap :) <meta name="robots" content="noindex, nofollow" /> |
|
upd pls |
|
@erwanriou we're inserting the "noindex" meta tag for custom |
|
@huozhi on the last version, it add the |
|
I think I've crossed this one too, or something related. I have an async function to generate the metadata, the page is a RSC async too. Returning Returning Anyway to solve that? |
|
@felipedeboni can you provide your reproduction for your case? |
|
I bumped into this issue too after adding a slot to a root layout. I tried including In my case, non-intercepting I have already deleted the slot completely, things work again. I won’t have an opportunity to craft a reproduction, but I believ that it would be somewhat similar to #53170. This issue was created by me a few months back when I tried slots for the first time but failed. The issue is marked as closed but maaaaybe it still manifests itself in some form or another. Gonna try slots again (for the third time) in a few months, falling back to a less fancy solution for now 😅 |
|
I had a similar problem caused by returning |
|
We're building a website with strong requirements for progressive enhancement and ran into problems with this behavior. We need to have all information and (most) interactive functionality available to users without Javascript enabled. But right now our 404 pages (triggered by Would love to see a more robust solution for server-side error handling. Especially when the rest of Next.js is pretty good for progressive enhancement. |
|
Im doing the same and same happends @vercel please fix this asap. That is what happend I have a not-found.tsx file |
This comment has been minimized.
This comment has been minimized.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Link to the code that reproduces this issue
https://github.com/nikcio/nextjs-notfound-example
To Reproduce
npx create-next-app@latestnotFound()function.Example for the
page.tsx:Current vs. Expected behavior
Expected
I expected that the 404 page was server rendered both when using
next devandnext start. But also most importantly server rendered when triggered using thenotFound()function.Current behavior
Examples from: https://github.com/nikcio/nextjs-notfound-example
Development (
next dev)All pages returns a
404status codeProduction build (
next build && next start)The rendered result for all requests are the default not found page:
Provide environment information
Which area(s) are affected? (Select all that apply)
App Router, Routing (next/router, next/navigation, next/link)
Which stage(s) are affected? (Select all that apply)
next dev (local), next start (local)
Additional context
We encountered this as an issue when using next-runtime-env that adds a
<script>tag to the<head>of the page. This is a problem because when the whole page is client rendered on the not found page the script tag is added after the page is loaded and the script will never be executed without an explicit call from another component.You can replicate this using the
Scriptcomponent from Next and usingstrategy="beforeInteractive".I've made an example here: https://github.com/nikcio/nextjs-notfound-example/tree/example/script-in-head
The text was updated successfully, but these errors were encountered: