Code Monkey home page Code Monkey logo

Comments (8)

goonerDp avatar goonerDp commented on May 13, 2024 1

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.

nikcio avatar nikcio commented on May 13, 2024 1

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,&quot;Segoe UI&quot;,Roboto,Helvetica,Arial,sans-serif,&quot;Apple Color Emoji&quot;,&quot;Segoe UI Emoji&quot;;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,&quot;Segoe UI&quot;,Roboto,Helvetica,Arial,sans-serif,&quot;Apple Color Emoji&quot;,&quot;Segoe UI Emoji&quot;;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,&quot;Segoe UI&quot;,Roboto,Helvetica,Arial,sans-serif,&quot;Apple Color Emoji&quot;,&quot;Segoe UI Emoji&quot;;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,&quot;Segoe UI&quot;,Roboto,Helvetica,Arial,sans-serif,&quot;Apple Color Emoji&quot;,&quot;Segoe UI Emoji&quot;;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.

coffeecupjapan avatar coffeecupjapan commented on May 13, 2024

@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

const pageData = isAppPath
? await this.fs.readFile(
this.getFilePath(
`${key}${
this.experimental.ppr ? RSC_PREFETCH_SUFFIX : RSC_SUFFIX
}`,
'app'
),
'utf8'
)

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

<html id="__next_error__">
<head></head>
<body></body>
</html>,

next.js/packages/next/src/client/components/app-router.tsx

Line 631 in bef716a

{cache.rsc}

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

const { seedData, styles } = await createComponentTree({
ctx,
createSegmentPath: (child) => child,
loaderTree: tree,
parentParams: {},
firstItem: true,
injectedCSS,
injectedJS,
injectedFontPreloadTags,
rootLayoutIncluded: false,
asNotFound: asNotFound,
metadataOutlet: <MetadataOutlet />,
missingSlots,
})

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.

Multiply avatar Multiply commented on May 13, 2024

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.

roamn avatar roamn commented on May 13, 2024

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.

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.

huozhi avatar huozhi commented on May 13, 2024

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.

avianion avatar avianion commented on May 13, 2024

This is still an issue with the latest canary release.

Especially with turbopack and hot reload.

from next.js.

erwanriou avatar erwanriou commented on May 13, 2024

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.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.