Inline Script-In-Head With notFound Explicit Calling Issue At NextJS

bash_bob

Setup: Blueprint of NextJS application npx create-next-app@latest test-not-found Modifying layout.tsx : ... + import Script from "next/script"; ... <head> + <script + dangerouslySetInnerHTML={{ + __html: + '"use strict";console.log("Run as soon as possible (<script />)");', + }} + /> + <Script async defer id="appearance-init" strategy="beforeInteractive"> + {'"use strict";console.log("Run as soon as possible (<Script />)");'} + </Script> </head>...

Originally asked by Alex Sindre on Stack Exchange (stackoverflow) (CC BY-SA 4.0).

uphilltech

Great question — answering as the UphillTech team:

This looks like a Next.js issue rather than a problem with asyc or defer. There is already a confirmed issue for beforeInteractive scripts not running when notFound() is called. github.com/vercel/next.js/issues/69567 If the script doesn't strictly need to run before hydration, changing it to afterInteractive is the simpler workaround: <Script id="appearance-init" strategy="afterInteractive"> {`"use strict"; console.log("script executed");`} </Script> If it really must execute before hydration, afterInteractive isn't equivalent, so I wouldn't treat it as a proper fix. In that case the current notFound() behaviour is the limitation you are running into rather than something async or defer can...

Full answer by Faheem: https://stackoverflow.stackexchange.com/a/80007524 (CC BY-SA 4.0).

Need it done for your business? UphillTech.