Comments (14)
upd pls
from next.js.
In my case
- "not-found.tsx" is always client side rendered with "next": "13.5.5"
- it's client side rendered during development and SSR in production with "next": "14.1.0"
from next.js.
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 app/[locale]
the default catch all 404 didn't work.
We've then tried app/[locale]/[...catchall]/page.tsx
that returns notFound()
, and then correctly hits our app/[locale]/not-found.tsx
but it's not SSR, and causes a bunch of flashing of content when loaded.
If we add a loading.tsx
all layouts render fine, but the error content is still only loaded client side, also causing flashing.
from next.js.
Hi @huozhi
I've just tested this again against the 14.2.0-canary.46
and it seems not all cases have been solved by your PR.
The updated reproduction repo can be found here: https://github.com/nikcio/nextjs-notfound-example/tree/canary-46-test
Branch: canary-46-test
Responses on routes
Development (next dev
)
localhost:3000/test [NOW WORKS]
(Default page not found - The page doesn't exist)
Response
<!DOCTYPE html>
<html lang="en">
<head>
<meta charSet="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="/_next/static/css/css-app_globals_css-node_modules_next_font_google_target_css.css?v=1711627971699" data-precedence="next_static/css/css-app_globals_css-node_modules_next_font_google_target_css.css"/>
<link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack.js?v=1711627971699"/>
<script src="/_next/static/chunks/main-app.js?v=1711627971699" async=""></script>
<script src="/_next/static/chunks/app-pages-internals.js" async=""></script>
<meta name="robots" content="noindex"/>
<title>404: This page could not be found.</title>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app"/>
<script src="/_next/static/chunks/polyfills.js" noModule=""></script>
</head>
<body class="__className_aaf875">
<div style="font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center">
<div>
<style>
body {
color: #000;
background: #fff;
margin: 0
}
.next-error-h1 {
border-right: 1px solid rgba(0,0,0,.3)
}
@media (prefers-color-scheme: dark) {
body {
color:#fff;
background: #000
}
.next-error-h1 {
border-right: 1px solid rgba(255,255,255,.3)
}
}
</style>
<h1 class="next-error-h1" style="display:inline-block;margin:0 20px 0 0;padding:0 23px 0 0;font-size:24px;font-weight:500;vertical-align:top;line-height:49px">404</h1>
<div style="display:inline-block">
<h2 style="font-size:14px;font-weight:400;line-height:49px;margin:0">This page could not be found.</h2>
</div>
</div>
</div>
<script src="/_next/static/chunks/webpack.js?v=1711627971699" async=""></script>
<script>
(self.__next_f = self.__next_f || []).push([0]);
self.__next_f.push([2, null])
</script>
<script>
self.__next_f.push([1, "1:HL[\"/_next/static/css/css-app_globals_css-node_modules_next_font_google_target_css.css?v=1711627971699\",\"style\"]\n0:D{\"name\":\"rJ\",\"env\":\"Server\"}\n"])
</script>
<script>
self.__next_f.push([1, "2:I[\"(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js\",[\"app-pages-internals\",\"static/chunks/app-pages-internals.js\"],\"\"]\n5:I[\"(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js\",[\"app-pages-internals\",\"static/chunks/app-pages-internals.js\"],\"\"]\n6:I[\"(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js\",[\"app-pages-internals\",\"static/chunks/app-pages-internals.js\"],\"\"]\ne:I[\"(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js\",[\"app-pages-internals\",\"static/chunks/app-pages-internals.js\"],\"\"]\n3:D{\"name\":\"\",\"env\":\"Server\"}\n4:D{\"name\":\"NotFound\",\"env\":\"Server\"}\n4:[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]]\n7:D{\"name\":\"RootLayout\",\"env\":\"Server\"}\n8:D{\"name\":\"NotFound\",\"env\":\"Server\"}\n9:{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\""])
</script>
<script>
self.__next_f.push([1, ",\"alignItems\":\"center\",\"justifyContent\":\"center\"}\na:{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"}\nb:{\"display\":\"inline-block\"}\nc:{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0}\n8:[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":\"$9\",\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":\"$a\",\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":\"$b\",\"children\":[\"$\",\"h2\",null,{\"style\":\"$c\",\"children\":\"This page could not be found.\"}]}]]}]}]]\n7:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"__className_aaf875\",\"children\":[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$8\",\"notFoundStyles\":[],\"styles\":null}]}]}]\nd:D{\"name\":\"\",\"env\":\"Server\"}\nf:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/css-app_globals_css-node_modules_next_font_google_target_css.css?v=1711627971699\",\"precedence\":\"next_static/css/css-app_globals_css-node_modules_next_font_google_target_css.css\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L2\",null,{\"buildId\":\"development\",\"assetPrefix\":\"\",\"initialCanonicalUrl\":\"/test\",\"initialTree\":[\"\",{\"children\":[\"/_not-found\",{\"children\":[\"__PAGE__\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[\"/_not-found\",{\"children\":[\"__PAGE__\",{},[[\"$L3\",\"$4\"],null],null]},[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"/_not-found\",\"children\"],\"error\":\"$undefined\","])
</script>
<script>
self.__next_f.push([1, "\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$7\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[[\"$\",\"meta\",null,{\"name\":\"robots\",\"content\":\"noindex\"}],\"$Ld\"],\"globalErrorComponent\":\"$e\",\"missingSlots\":\"$Wf\"}]]\n"])
</script>
<script>
self.__next_f.push([1, "d:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Create Next App\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"Generated by create next app\"}]]\n3:null\n"])
</script>
</body>
</html>
localhost:3000/my-page [STILL DOESN'T SERVER RENDER]
(The page is set to return not found using the notFound()
function from next/navigation
)
Response
<!DOCTYPE html>
<html id="__next_error__">
<head>
<meta charSet="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack.js"/>
<script src="/_next/static/chunks/main-app.js" async=""></script>
<script src="/_next/static/chunks/app-pages-internals.js" async=""></script>
<meta name="robots" content="noindex"/>
<meta name="next-error" content="not-found"/>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app"/>
<link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16"/>
<script src="/_next/static/chunks/polyfills.js" noModule=""></script>
</head>
<body>
<script src="/_next/static/chunks/webpack.js" async=""></script>
<script>
(self.__next_f = self.__next_f || []).push([0]);
self.__next_f.push([2, null])
</script>
<script>
self.__next_f.push([1, "1:HL[\"/_next/static/css/css-app_globals_css-node_modules_next_font_google_target_css.css?v=1711628003754\",\"style\"]\n0:D{\"name\":\"rJ\",\"env\":\"Server\"}\n"])
</script>
<script>
self.__next_f.push([1, "2:I[\"(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js\",[\"app-pages-internals\",\"static/chunks/app-pages-internals.js\"],\"\"]\n5:I[\"(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js\",[\"app-pages-internals\",\"static/chunks/app-pages-internals.js\"],\"\"]\n6:I[\"(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js\",[\"app-pages-internals\",\"static/chunks/app-pages-internals.js\"],\"\"]\na:I[\"(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js\",[\"app-pages-internals\",\"static/chunks/app-pages-internals.js\"],\"\"]\n3:D{\"name\":\"\",\"env\":\"Server\"}\n4:D{\"name\":\"Page\",\"env\":\"Server\"}\n7:D{\"name\":\"RootLayout\",\"env\":\"Server\"}\n8:D{\"name\":\"NotFound\",\"env\":\"Server\"}\n8:[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]]\n7:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"__className_aaf875\",\"children\":[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined"])
</script>
<script>
self.__next_f.push([1, "\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$8\",\"notFoundStyles\":[],\"styles\":null}]}]}]\n9:D{\"name\":\"\",\"env\":\"Server\"}\nb:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/css-app_globals_css-node_modules_next_font_google_target_css.css?v=1711628003754\",\"precedence\":\"next_static/css/css-app_globals_css-node_modules_next_font_google_target_css.css\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L2\",null,{\"buildId\":\"development\",\"assetPrefix\":\"\",\"initialCanonicalUrl\":\"/my-page\",\"initialTree\":[\"\",{\"children\":[\"my-page\",{\"children\":[\"__PAGE__\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[\"my-page\",{\"children\":[\"__PAGE__\",{},[[\"$L3\",\"$L4\"],null],null]},[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"my-page\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$7\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$L9\"],\"globalErrorComponent\":\"$a\",\"missingSlots\":\"$Wb\"}]]\n"])
</script>
<script>
self.__next_f.push([1, "4:E{\"digest\":\"NEXT_NOT_FOUND\",\"message\":\"NEXT_NOT_FOUND\",\"stack\":\"Error: NEXT_NOT_FOUND\\n at notFound (webpack-internal:///(rsc)/./node_modules/next/dist/client/components/not-found.js:23:19)\\n at Page (webpack-internal:///(rsc)/./app/my-page/page.tsx:8:62)\\n at e_ (F:\\\\Github\\\\nextjs-notfound-example\\\\my-app\\\\node_modules\\\\next\\\\dist\\\\compiled\\\\next-server\\\\app-page.runtime.dev.js:35:263928)\\n at e (F:\\\\Github\\\\nextjs-notfound-example\\\\my-app\\\\node_modules\\\\next\\\\dist\\\\compiled\\\\next-server\\\\app-page.runtime.dev.js:35:268060)\\n at eF (F:\\\\Github\\\\nextjs-notfound-example\\\\my-app\\\\node_modules\\\\next\\\\dist\\\\compiled\\\\next-server\\\\app-page.runtime.dev.js:35:268548)\\n at eq (F:\\\\Github\\\\nextjs-notfound-example\\\\my-app\\\\node_modules\\\\next\\\\dist\\\\compiled\\\\next-server\\\\app-page.runtime.dev.js:35:274512)\\n at ej (F:\\\\Github\\\\nextjs-notfound-example\\\\my-app\\\\node_modules\\\\next\\\\dist\\\\compiled\\\\next-server\\\\app-page.runtime.dev.js:35:264756)\\n at e_ (F:\\\\Github\\\\nextjs-notfound-example\\\\my-app\\\\node_modules\\\\next\\\\dist\\\\compiled\\\\next-server\\\\app-page.runtime.dev.js:35:263798)\\n at e (F:\\\\Github\\\\nextjs-notfound-example\\\\my-app\\\\node_modules\\\\next\\\\dist\\\\compiled\\\\next-server\\\\app-page.runtime.dev.js:35:268060)\\n at eF (F:\\\\Github\\\\nextjs-notfound-example\\\\my-app\\\\node_modules\\\\next\\\\dist\\\\compiled\\\\next-server\\\\app-page.runtime.dev.js:35:268548)\\n at F:\\\\Github\\\\nextjs-notfound-example\\\\my-app\\\\node_modules\\\\next\\\\dist\\\\compiled\\\\next-server\\\\app-page.runtime.dev.js:35:265779\\n at Array.toJSON (F:\\\\Github\\\\nextjs-notfound-example\\\\my-app\\\\node_modules\\\\next\\\\dist\\\\compiled\\\\next-server\\\\app-page.runtime.dev.js:35:266243)\\n at stringify (\u003canonymous\u003e)\\n at eq (F:\\\\Github\\\\nextjs-notfound-example\\\\my-app\\\\node_modules\\\\next\\\\dist\\\\compiled\\\\next-server\\\\app-page.runtime.dev.js:35:274611)\\n at eJ (F:\\\\Github\\\\nextjs-notfound-example\\\\my-app\\\\node_modules\\\\next\\\\dist\\\\compiled\\\\next-server\\\\app-page.runtime.dev.js:35:275129)\\n at Timeout._onTimeout (F:\\\\Github\\\\nextjs-notfound-example\\\\my-app\\\\node_modules\\\\next\\\\dist\\\\compiled\\\\next-server\\\\app-page.runtime.dev.js:35:264916)\\n at listOnTimeout (node:internal/timers:573:17)\\n at process.processTimers (node:internal/timers:514:7)\"}\n"])
</script>
<script>
self.__next_f.push([1, "9:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Create Next App\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"Generated by create next app\"}],[\"$\",\"link\",\"4\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"16x16\"}]]\n3:null\n"])
</script>
</body>
</html>
localhost:3000/dynamic/test [NOW WORKS]
(Default page not found under a dynamic layout - The page doesn't exist)
Response
<!DOCTYPE html>
<html lang="en">
<head>
<meta charSet="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="/_next/static/css/css-app_globals_css-node_modules_next_font_google_target_css.css?v=1711628079836" data-precedence="next_static/css/css-app_globals_css-node_modules_next_font_google_target_css.css"/>
<link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack.js?v=1711628079836"/>
<script src="/_next/static/chunks/main-app.js?v=1711628079836" async=""></script>
<script src="/_next/static/chunks/app-pages-internals.js" async=""></script>
<meta name="robots" content="noindex"/>
<title>404: This page could not be found.</title>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app"/>
<script src="/_next/static/chunks/polyfills.js" noModule=""></script>
</head>
<body class="__className_aaf875">
<div style="font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center">
<div>
<style>
body {
color: #000;
background: #fff;
margin: 0
}
.next-error-h1 {
border-right: 1px solid rgba(0,0,0,.3)
}
@media (prefers-color-scheme: dark) {
body {
color:#fff;
background: #000
}
.next-error-h1 {
border-right: 1px solid rgba(255,255,255,.3)
}
}
</style>
<h1 class="next-error-h1" style="display:inline-block;margin:0 20px 0 0;padding:0 23px 0 0;font-size:24px;font-weight:500;vertical-align:top;line-height:49px">404</h1>
<div style="display:inline-block">
<h2 style="font-size:14px;font-weight:400;line-height:49px;margin:0">This page could not be found.</h2>
</div>
</div>
</div>
<script src="/_next/static/chunks/webpack.js?v=1711628079836" async=""></script>
<script>
(self.__next_f = self.__next_f || []).push([0]);
self.__next_f.push([2, null])
</script>
<script>
self.__next_f.push([1, "1:HL[\"/_next/static/css/css-app_globals_css-node_modules_next_font_google_target_css.css?v=1711628079836\",\"style\"]\n0:D{\"name\":\"rJ\",\"env\":\"Server\"}\n"])
</script>
<script>
self.__next_f.push([1, "2:I[\"(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js\",[\"app-pages-internals\",\"static/chunks/app-pages-internals.js\"],\"\"]\n5:I[\"(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js\",[\"app-pages-internals\",\"static/chunks/app-pages-internals.js\"],\"\"]\n6:I[\"(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js\",[\"app-pages-internals\",\"static/chunks/app-pages-internals.js\"],\"\"]\ne:I[\"(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js\",[\"app-pages-internals\",\"static/chunks/app-pages-internals.js\"],\"\"]\n3:D{\"name\":\"\",\"env\":\"Server\"}\n4:D{\"name\":\"NotFound\",\"env\":\"Server\"}\n4:[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]]\n7:D{\"name\":\"RootLayout\",\"env\":\"Server\"}\n8:D{\"name\":\"NotFound\",\"env\":\"Server\"}\n9:{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\""])
</script>
<script>
self.__next_f.push([1, ",\"alignItems\":\"center\",\"justifyContent\":\"center\"}\na:{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"}\nb:{\"display\":\"inline-block\"}\nc:{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0}\n8:[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":\"$9\",\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":\"$a\",\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":\"$b\",\"children\":[\"$\",\"h2\",null,{\"style\":\"$c\",\"children\":\"This page could not be found.\"}]}]]}]}]]\n7:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"__className_aaf875\",\"children\":[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$8\",\"notFoundStyles\":[],\"styles\":null}]}]}]\nd:D{\"name\":\"\",\"env\":\"Server\"}\nf:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/css-app_globals_css-node_modules_next_font_google_target_css.css?v=1711628079836\",\"precedence\":\"next_static/css/css-app_globals_css-node_modules_next_font_google_target_css.css\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L2\",null,{\"buildId\":\"development\",\"assetPrefix\":\"\",\"initialCanonicalUrl\":\"/dynamic/test\",\"initialTree\":[\"\",{\"children\":[\"/_not-found\",{\"children\":[\"__PAGE__\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[\"/_not-found\",{\"children\":[\"__PAGE__\",{},[[\"$L3\",\"$4\"],null],null]},[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"/_not-found\",\"children\"],\"error\":\"$und"])
</script>
<script>
self.__next_f.push([1, "efined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$7\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[[\"$\",\"meta\",null,{\"name\":\"robots\",\"content\":\"noindex\"}],\"$Ld\"],\"globalErrorComponent\":\"$e\",\"missingSlots\":\"$Wf\"}]]\n"])
</script>
<script>
self.__next_f.push([1, "d:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Create Next App\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"Generated by create next app\"}]]\n3:null\n"])
</script>
</body>
</html>
localhost:3000/dynamic/my-page [STILL DOESN'T SERVER RENDER]
(The page is set to return not found using the notFound()
function from next/navigation
- The page is under a route with a force-dynamic
layout)
Response
<!DOCTYPE html>
<html id="__next_error__">
<head>
<meta charSet="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack.js"/>
<script src="/_next/static/chunks/main-app.js" async=""></script>
<script src="/_next/static/chunks/app-pages-internals.js" async=""></script>
<meta name="robots" content="noindex"/>
<meta name="next-error" content="not-found"/>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app"/>
<link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16"/>
<script src="/_next/static/chunks/polyfills.js" noModule=""></script>
</head>
<body>
<script src="/_next/static/chunks/webpack.js" async=""></script>
<script>
(self.__next_f = self.__next_f || []).push([0]);
self.__next_f.push([2, null])
</script>
<script>
self.__next_f.push([1, "1:HL[\"/_next/static/css/css-app_globals_css-node_modules_next_font_google_target_css.css?v=1711628103888\",\"style\"]\n0:D{\"name\":\"rJ\",\"env\":\"Server\"}\n"])
</script>
<script>
self.__next_f.push([1, "2:I[\"(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js\",[\"app-pages-internals\",\"static/chunks/app-pages-internals.js\"],\"\"]\n5:I[\"(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js\",[\"app-pages-internals\",\"static/chunks/app-pages-internals.js\"],\"\"]\n6:I[\"(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js\",[\"app-pages-internals\",\"static/chunks/app-pages-internals.js\"],\"\"]\nb:I[\"(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js\",[\"app-pages-internals\",\"static/chunks/app-pages-internals.js\"],\"\"]\n3:D{\"name\":\"\",\"env\":\"Server\"}\n4:D{\"name\":\"Page\",\"env\":\"Server\"}\n7:D{\"name\":\"Layout\",\"env\":\"Server\"}\n7:[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"dynamic\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}]\n8:D{\"name\":\"RootLayout\",\"env\":\"Server\"}\n9:D{\"name\":\"NotFound\",\"env\":\"Server\"}\n9:[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"disp"])
</script>
<script>
self.__next_f.push([1, "lay\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]]\n8:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"__className_aaf875\",\"children\":[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$9\",\"notFoundStyles\":[],\"styles\":null}]}]}]\na:D{\"name\":\"\",\"env\":\"Server\"}\nc:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/css-app_globals_css-node_modules_next_font_google_target_css.css?v=1711628103888\",\"precedence\":\"next_static/css/css-app_globals_css-node_modules_next_font_google_target_css.css\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L2\",null,{\"buildId\":\"development\",\"assetPrefix\":\"\",\"initialCanonicalUrl\":\"/dynamic/my-page\",\"initialTree\":[\"\",{\"children\":[\"dynamic\",{\"children\":[\"my-page\",{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[\"dynamic\",{\"children\":[\"my-page\",{\"children\":[\"__PAGE__\",{},[[\"$L3\",\"$L4\"],null],null]},[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"dynamic\",\"children\",\"my-page\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$7\",null],null]},[\"$8\",null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$La\"],\"globalErrorComponent\":\"$b\",\"missingSlots\":\"$Wc\"}]]\n"])
</script>
<script>
self.__next_f.push([1, "4:E{\"digest\":\"NEXT_NOT_FOUND\",\"message\":\"NEXT_NOT_FOUND\",\"stack\":\"Error: NEXT_NOT_FOUND\\n at notFound (webpack-internal:///(rsc)/./node_modules/next/dist/client/components/not-found.js:23:19)\\n at Page (webpack-internal:///(rsc)/./app/dynamic/my-page/page.tsx:8:62)\\n at e_ (F:\\\\Github\\\\nextjs-notfound-example\\\\my-app\\\\node_modules\\\\next\\\\dist\\\\compiled\\\\next-server\\\\app-page.runtime.dev.js:35:263928)\\n at e (F:\\\\Github\\\\nextjs-notfound-example\\\\my-app\\\\node_modules\\\\next\\\\dist\\\\compiled\\\\next-server\\\\app-page.runtime.dev.js:35:268060)\\n at eF (F:\\\\Github\\\\nextjs-notfound-example\\\\my-app\\\\node_modules\\\\next\\\\dist\\\\compiled\\\\next-server\\\\app-page.runtime.dev.js:35:268548)\\n at eq (F:\\\\Github\\\\nextjs-notfound-example\\\\my-app\\\\node_modules\\\\next\\\\dist\\\\compiled\\\\next-server\\\\app-page.runtime.dev.js:35:274512)\\n at ej (F:\\\\Github\\\\nextjs-notfound-example\\\\my-app\\\\node_modules\\\\next\\\\dist\\\\compiled\\\\next-server\\\\app-page.runtime.dev.js:35:264756)\\n at e_ (F:\\\\Github\\\\nextjs-notfound-example\\\\my-app\\\\node_modules\\\\next\\\\dist\\\\compiled\\\\next-server\\\\app-page.runtime.dev.js:35:263798)\\n at e (F:\\\\Github\\\\nextjs-notfound-example\\\\my-app\\\\node_modules\\\\next\\\\dist\\\\compiled\\\\next-server\\\\app-page.runtime.dev.js:35:268060)\\n at eF (F:\\\\Github\\\\nextjs-notfound-example\\\\my-app\\\\node_modules\\\\next\\\\dist\\\\compiled\\\\next-server\\\\app-page.runtime.dev.js:35:268548)\\n at F:\\\\Github\\\\nextjs-notfound-example\\\\my-app\\\\node_modules\\\\next\\\\dist\\\\compiled\\\\next-server\\\\app-page.runtime.dev.js:35:265779\\n at Array.toJSON (F:\\\\Github\\\\nextjs-notfound-example\\\\my-app\\\\node_modules\\\\next\\\\dist\\\\compiled\\\\next-server\\\\app-page.runtime.dev.js:35:266243)\\n at stringify (\u003canonymous\u003e)\\n at eq (F:\\\\Github\\\\nextjs-notfound-example\\\\my-app\\\\node_modules\\\\next\\\\dist\\\\compiled\\\\next-server\\\\app-page.runtime.dev.js:35:274611)\\n at eJ (F:\\\\Github\\\\nextjs-notfound-example\\\\my-app\\\\node_modules\\\\next\\\\dist\\\\compiled\\\\next-server\\\\app-page.runtime.dev.js:35:275129)\\n at Timeout._onTimeout (F:\\\\Github\\\\nextjs-notfound-example\\\\my-app\\\\node_modules\\\\next\\\\dist\\\\compiled\\\\next-server\\\\app-page.runtime.dev.js:35:264916)\\n at listOnTimeout (node:internal/timers:573:17)\\n at process.processTimers (node:internal/timers:514:7)\"}\n"])
</script>
<script>
self.__next_f.push([1, "a:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Create Next App\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"Generated by create next app\"}],[\"$\",\"link\",\"4\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"16x16\"}]]\n3:null\n"])
</script>
</body>
</html>
Notes:
All pages now correctly return a 404 response.
Production build (next build && next start
)
localhost:3000/test [STILL WORKS]
(Default page not found - The page doesn't exist)
Response
<!DOCTYPE html>
<html lang="en">
<head>
<meta charSet="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="/_next/static/css/dd38daebdb56413f.css" data-precedence="next"/>
<link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-be8c90fe7e0eb3f5.js"/>
<script src="/_next/static/chunks/fd9d1056-2821b0f0cabcd8bd.js" async=""></script>
<script src="/_next/static/chunks/23-ef6731f66e8e4d01.js" async=""></script>
<script src="/_next/static/chunks/main-app-be5f8c4e0b18f822.js" async=""></script>
<meta name="robots" content="noindex"/>
<title>404: This page could not be found.</title>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app"/>
<script src="/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js" noModule=""></script>
</head>
<body class="__className_aaf875">
<div style="font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center">
<div>
<style>
body {
color: #000;
background: #fff;
margin: 0
}
.next-error-h1 {
border-right: 1px solid rgba(0,0,0,.3)
}
@media (prefers-color-scheme: dark) {
body {
color:#fff;
background: #000
}
.next-error-h1 {
border-right: 1px solid rgba(255,255,255,.3)
}
}
</style>
<h1 class="next-error-h1" style="display:inline-block;margin:0 20px 0 0;padding:0 23px 0 0;font-size:24px;font-weight:500;vertical-align:top;line-height:49px">404</h1>
<div style="display:inline-block">
<h2 style="font-size:14px;font-weight:400;line-height:49px;margin:0">This page could not be found.</h2>
</div>
</div>
</div>
<script src="/_next/static/chunks/webpack-be8c90fe7e0eb3f5.js" async=""></script>
<script>
(self.__next_f = self.__next_f || []).push([0]);
self.__next_f.push([2, null])
</script>
<script>
self.__next_f.push([1, "1:HL[\"/_next/static/css/dd38daebdb56413f.css\",\"style\"]\n"])
</script>
<script>
self.__next_f.push([1, "2:I[5751,[],\"\"]\n4:I[9275,[],\"\"]\n5:I[1343,[],\"\"]\nb:I[6130,[],\"\"]\n6:{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"}\n7:{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"}\n8:{\"display\":\"inline-block\"}\n9:{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0}\nc:[]\n"])
</script>
<script>
self.__next_f.push([1, "0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/dd38daebdb56413f.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L2\",null,{\"buildId\":\"MbtX1QJIQf2Gx7pv9CGge\",\"assetPrefix\":\"\",\"initialCanonicalUrl\":\"/test\",\"initialTree\":[\"\",{\"children\":[\"/_not-found\",{\"children\":[\"__PAGE__\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[\"/_not-found\",{\"children\":[\"__PAGE__\",{},[[\"$L3\",[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]]],null],null]},[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"/_not-found\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"__className_aaf875\",\"children\":[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":\"$6\",\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":\"$7\",\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":\"$8\",\"children\":[\"$\",\"h2\",null,{\"style\":\"$9\",\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]}],null],null],\"couldBeIntercepted\":false,\"initialHead\":[[\"$\",\"meta\",null,{\"name\":\"robots\",\"content\":\"noindex\"}],\"$La\"],\"globalErrorComponent\":\"$b\",\"missingSlots\":\"$Wc\"}]]\n"])
</script>
<script>
self.__next_f.push([1, "a:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Create Next App\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"Generated by create next app\"}]]\n3:null\n"])
</script>
</body>
</html>
localhost:3000/my-page [STILL DOESN'T SERVER RENDER]
(The page is set to return not found using the notFound()
function from next/navigation
)
Response
<!DOCTYPE html>
<html id="__next_error__">
<head>
<meta charSet="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-be8c90fe7e0eb3f5.js"/>
<script src="/_next/static/chunks/fd9d1056-2821b0f0cabcd8bd.js" async=""></script>
<script src="/_next/static/chunks/23-ef6731f66e8e4d01.js" async=""></script>
<script src="/_next/static/chunks/main-app-be5f8c4e0b18f822.js" async=""></script>
<meta name="robots" content="noindex"/>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app"/>
<link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16"/>
<script src="/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js" noModule=""></script>
</head>
<body>
<script src="/_next/static/chunks/webpack-be8c90fe7e0eb3f5.js" async=""></script>
<script>
(self.__next_f = self.__next_f || []).push([0]);
self.__next_f.push([2, null])
</script>
<script>
self.__next_f.push([1, "1:HL[\"/_next/static/css/dd38daebdb56413f.css\",\"style\"]\n"])
</script>
<script>
self.__next_f.push([1, "2:I[5751,[],\"\"]\n5:I[9275,[],\"\"]\n6:I[1343,[],\"\"]\n8:I[6130,[],\"\"]\n9:[]\n"])
</script>
<script>
self.__next_f.push([1, "0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/dd38daebdb56413f.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L2\",null,{\"buildId\":\"MbtX1QJIQf2Gx7pv9CGge\",\"assetPrefix\":\"\",\"initialCanonicalUrl\":\"/my-page\",\"initialTree\":[\"\",{\"children\":[\"my-page\",{\"children\":[\"__PAGE__\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[\"my-page\",{\"children\":[\"__PAGE__\",{},[[\"$L3\",\"$L4\"],null],null]},[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"my-page\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"__className_aaf875\",\"children\":[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]}],null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$L7\"],\"globalErrorComponent\":\"$8\",\"missingSlots\":\"$W9\"}]]\n"])
</script>
<script>
self.__next_f.push([1, "4:E{\"digest\":\"NEXT_NOT_FOUND\"}\n"])
</script>
<script>
self.__next_f.push([1, "7:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Create Next App\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"Generated by create next app\"}],[\"$\",\"link\",\"4\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"16x16\"}]]\n3:null\n"])
</script>
</body>
</html>
localhost:3000/dynamic/test [STILL WORKS]
(Default page not found under a dynamic layout - The page doesn't exist)
Response
<!DOCTYPE html>
<html lang="en">
<head>
<meta charSet="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="/_next/static/css/dd38daebdb56413f.css" data-precedence="next"/>
<link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-be8c90fe7e0eb3f5.js"/>
<script src="/_next/static/chunks/fd9d1056-2821b0f0cabcd8bd.js" async=""></script>
<script src="/_next/static/chunks/23-ef6731f66e8e4d01.js" async=""></script>
<script src="/_next/static/chunks/main-app-be5f8c4e0b18f822.js" async=""></script>
<meta name="robots" content="noindex"/>
<title>404: This page could not be found.</title>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app"/>
<script src="/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js" noModule=""></script>
</head>
<body class="__className_aaf875">
<div style="font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center">
<div>
<style>
body {
color: #000;
background: #fff;
margin: 0
}
.next-error-h1 {
border-right: 1px solid rgba(0,0,0,.3)
}
@media (prefers-color-scheme: dark) {
body {
color:#fff;
background: #000
}
.next-error-h1 {
border-right: 1px solid rgba(255,255,255,.3)
}
}
</style>
<h1 class="next-error-h1" style="display:inline-block;margin:0 20px 0 0;padding:0 23px 0 0;font-size:24px;font-weight:500;vertical-align:top;line-height:49px">404</h1>
<div style="display:inline-block">
<h2 style="font-size:14px;font-weight:400;line-height:49px;margin:0">This page could not be found.</h2>
</div>
</div>
</div>
<script src="/_next/static/chunks/webpack-be8c90fe7e0eb3f5.js" async=""></script>
<script>
(self.__next_f = self.__next_f || []).push([0]);
self.__next_f.push([2, null])
</script>
<script>
self.__next_f.push([1, "1:HL[\"/_next/static/css/dd38daebdb56413f.css\",\"style\"]\n"])
</script>
<script>
self.__next_f.push([1, "2:I[5751,[],\"\"]\n4:I[9275,[],\"\"]\n5:I[1343,[],\"\"]\nb:I[6130,[],\"\"]\n6:{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"}\n7:{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"}\n8:{\"display\":\"inline-block\"}\n9:{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0}\nc:[]\n"])
</script>
<script>
self.__next_f.push([1, "0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/dd38daebdb56413f.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L2\",null,{\"buildId\":\"MbtX1QJIQf2Gx7pv9CGge\",\"assetPrefix\":\"\",\"initialCanonicalUrl\":\"/dynamic/test\",\"initialTree\":[\"\",{\"children\":[\"/_not-found\",{\"children\":[\"__PAGE__\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[\"/_not-found\",{\"children\":[\"__PAGE__\",{},[[\"$L3\",[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]]],null],null]},[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"/_not-found\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"__className_aaf875\",\"children\":[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":\"$6\",\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":\"$7\",\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":\"$8\",\"children\":[\"$\",\"h2\",null,{\"style\":\"$9\",\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]}],null],null],\"couldBeIntercepted\":false,\"initialHead\":[[\"$\",\"meta\",null,{\"name\":\"robots\",\"content\":\"noindex\"}],\"$La\"],\"globalErrorComponent\":\"$b\",\"missingSlots\":\"$Wc\"}]]\n"])
</script>
<script>
self.__next_f.push([1, "a:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Create Next App\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"Generated by create next app\"}]]\n3:null\n"])
</script>
</body>
</html>
localhost:3000/dynamic/my-page [STILL DOESN'T SERVER RENDER]
(The page is set to return not found using the notFound()
function from next/navigation
- The page is under a route with a force-dynamic
layout)
Response
<!DOCTYPE html>
<html id="__next_error__">
<head>
<meta charSet="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-be8c90fe7e0eb3f5.js"/>
<script src="/_next/static/chunks/fd9d1056-2821b0f0cabcd8bd.js" async=""></script>
<script src="/_next/static/chunks/23-ef6731f66e8e4d01.js" async=""></script>
<script src="/_next/static/chunks/main-app-be5f8c4e0b18f822.js" async=""></script>
<meta name="robots" content="noindex"/>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app"/>
<link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16"/>
<script src="/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js" noModule=""></script>
</head>
<body>
<script src="/_next/static/chunks/webpack-be8c90fe7e0eb3f5.js" async=""></script>
<script>
(self.__next_f = self.__next_f || []).push([0]);
self.__next_f.push([2, null])
</script>
<script>
self.__next_f.push([1, "1:HL[\"/_next/static/css/dd38daebdb56413f.css\",\"style\"]\n"])
</script>
<script>
self.__next_f.push([1, "2:I[5751,[],\"\"]\n5:I[9275,[],\"\"]\n6:I[1343,[],\"\"]\n8:I[6130,[],\"\"]\n9:[]\n"])
</script>
<script>
self.__next_f.push([1, "0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/dd38daebdb56413f.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L2\",null,{\"buildId\":\"MbtX1QJIQf2Gx7pv9CGge\",\"assetPrefix\":\"\",\"initialCanonicalUrl\":\"/dynamic/my-page\",\"initialTree\":[\"\",{\"children\":[\"dynamic\",{\"children\":[\"my-page\",{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[\"dynamic\",{\"children\":[\"my-page\",{\"children\":[\"__PAGE__\",{},[[\"$L3\",\"$L4\"],null],null]},[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"dynamic\",\"children\",\"my-page\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"dynamic\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null],null]},[[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"__className_aaf875\",\"children\":[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]}],null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$L7\"],\"globalErrorComponent\":\"$8\",\"missingSlots\":\"$W9\"}]]\n"])
</script>
<script>
self.__next_f.push([1, "4:E{\"digest\":\"NEXT_NOT_FOUND\"}\n"])
</script>
<script>
self.__next_f.push([1, "7:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Create Next App\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"Generated by create next app\"}],[\"$\",\"link\",\"4\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"16x16\"}]]\n3:null\n"])
</script>
</body>
</html>
Notes:
All pages now correctly return a 404 response.
from next.js.
I also found that if we add a custom not-found.js
page then it render the custom page but doesn't return the 404 error...
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" />
from next.js.
@huozhi on the last version, it add the no-index
so there is no need to add it manually. I reverted this change of mine as now unnecessary
from next.js.
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 notFound
on RSC gives 200 OK, but correctly renders the not-found.tsx
- however 200 OK prevents removing pages from Google Index through Google Search Console or it's API.
Returning notFound
on generateMetadata
gives 404 Not Found as expected but renders an empty screen.
Anyway to solve that?
from next.js.
@nikcio
Hi.
I Investigate this issue, but I cannot find any solutions to bypass it.
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
2 : calling notFound without cache strategy
3 : go to page that is not exist
For First case, Next.js stores RSC format and HTML format of render result in build phase to cache the result.
In below code, incrementalCache
search for .rsc
and .html
extension file under .next/server/app/
folder and get cache in base-server.ts
.
next.js/packages/next/src/server/lib/incremental-cache/file-system-cache.ts
Lines 214 to 223 in 0fcb946
This html
format and rsc
format of file is created during build phase and it is hard to modify.
So how about second case ?
In short, when page throws notFound() at server render phase without cache strategy, server only pass almost empty html body to initial page render.
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.
Also see comments about notFound error
// For metadata notFound error there's no global not found boundary on top
// so we create a not found page with AppRouter
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.
I am sorry that I cannot help you find any good solution.
from next.js.
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
app/[locale]
the default catch all 404 didn't work. We've then triedapp/[locale]/[...catchall]/page.tsx
that returnsnotFound()
, and then correctly hits ourapp/[locale]/not-found.tsx
but it's not SSR, and causes a bunch of flashing of content when loaded.If we add a
loading.tsx
all layouts render fine, but the error content is still only loaded client side, also causing flashing.
I solve 404 i18n issues with middleware path header.
I put page to app/not-found.tsx
with code like this
not-found.tsx
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>
);
}
middleware.ts
export function middleware(request: NextRequest): NextResponse {
// ...
const { nextUrl } = request;
const { pathname } = nextUrl;
requestHeaders.set("x-pathname", pathname);
// ...
}
In this case 404 page is SSR.
from next.js.
Hi, sorry for the confusion that closes the issue by that PR since that fix was more related to the status code.
What you saw is expected as the not found boundaries is triggered no client side. The SSR'd result will contain the not-found error and then client side the proper error boundaries will catch it and display the proper error component, like the not-found.js
for 404 errors. At the moment, the error boundaries don't work on SSR that's why they're not SSR'd.
I reopen the issue to avoid it's gonna be locked automatically. Feel free to close it if the explanation makes sense to you.
from next.js.
This is still an issue with the latest canary release.
Especially with turbopack and hot reload.
from next.js.
@erwanriou we're inserting the "noindex" meta tag for custom not-found.js
, if it doesn't have it then that sounds like a bug. Could you file an separate issue wih your reproduction? Thanks
from next.js.
@felipedeboni can you provide your reproduction for your case?
from next.js.
I bumped into this issue too after adding a slot to a root layout. I tried including default.tsx
, not-found.tsx
etc. on different level of that slot but I still ended up with a notFound
exception popping all the way up and ignoring not-found.tsx
in the ‘main’ slot (no subfolder). This produced a blank page in production.
In my case, non-intercepting notFound()
was coming from export async function generateMetadata
function in the ‘main’ slot.
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 😅
from next.js.
Related Issues (20)
- TypeError: Cannot read properties of null (reading 'useContext')
- route endpoint that renders ImageResponse returns Error: failed to pipe response when loading custom fonts HOT 1
- Unable to connect to localhost the npm run dev is creashing | Thing is react js website is running fine but getting issue with nextjs only HOT 5
- Unnecessary styles for multi tenant style app
- renderToString is not available in the Instrumentation hook HOT 4
- Bug with unmatched Routes HOT 5
- Docs: server actions and mutations pending states HOT 1
- Constants from use client files not outputting correctly inside template string
- Nextjs cannot be built in Podman. HOT 1
- null is not an object (evaluating 't.parallelRoutes.get') HOT 3
- nextjs.org/learn chapter 15 code error HOT 1
- Suspense not working in a nested route
- OpenTelemetry Tracing is poluted with some extra spans from middlewares
- middleware: Return or Link to the home page, the index.json of the updated data is redirected HOT 1
- `unstable_cache` with certain value of revalidation interval persisted correctly in production build
- Failed To Load SWC binary for win32/x64 HOT 1
- Click the browser forward and back, and getServerSideProps does not re-execute HOT 20
- next.config.ts does not support top-level-await
- Failed to load SWC binary for win32/x64
- Custom cache handler with dynamic route + static params always shows 404 page HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from next.js.