How do I use the Script component in the rootlayout?
#Script
midnight anvil
onyx narwhalBOT
Hi @midnight anvil. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
To use the Script component in the root layout of your Next.js application, you need to import next/script and include the script directly in your root layout. Here's an example:
import Script from 'next/script'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
<Script src="<https://example.com/script.js">This script will load and execute when any route in your application is accessed. Next.js will ensure the script will only load once, even if a user navigates between multiple pages.
However, it's recommended to only include third-party scripts in specific pages or layouts to minimize any unnecessary impact on performance.
If you're migrating from pages to app, you need to move any beforeInteractive scripts you previously included in _document.js to the root layout file (app/layout.tsx). Also, note that the experimental worker strategy does not yet work in app and scripts denoted with this strategy will either have to be removed or modified to use a different strategy (e.g. lazyOnload). Handlers like onLoad, onReady, and onError will not work in Server Components, so make sure to move them to a Client Component or remove them altogether.
Sources:
- Next.js Documentation - Script Optimization (https://nextjs.org/docs/app/building-your-application/optimizing/scripts)
- Next.js Documentation - App Router Incremental Adoption Guide (https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration)
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
midnight anvil
@onyx narwhal does it matter if the script is used after or before the body element?
onyx narwhalBOT
Let me check the knowledge base for you. One moment! :books:
Yes, it does matter where you place the Script component in your Next.js application.
If you're using the beforeInteractive strategy, the script is designed to be placed inside the root layout (app/layout.tsx) and it will always be injected inside the head of the HTML document regardless of where it's placed in the component. This strategy is used for critical scripts that need to be fetched before any part of the page becomes interactive.
Here's an example:
import Script from 'next/script'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
<Script
src="<https://example.com/script.js">
strategy="beforeInteractive"
/>
</html>
)
}
However, based on the discussion in the GitHub issue, some users have reported hydration issues when placing the Script component with beforeInteractive strategy in the root layout. A workaround suggested by some users is to place the Script tag directly inside the body tag or right before the body tag ends.
Please note that these are user-reported solutions and may not work in all cases. It's always recommended to follow the official Next.js documentation for best practices.
Sources:
- Next.js Documentation - Script Component (https://nextjs.org/docs/app/api-reference/components/script)
- GitHub Issue - Any <Script /> with strategy="beforeInteractive" in RootLayout causes hydration errors (https://github.com/vercel/next.js/issues/51242)