Next.js Discord

Discord Forum

Correct usage of <Script> inside root layout

Unanswered
Capple posted this in #help-forum
Open in Discord
Avatar
CappleOP
Hello,

I added a script to my root layout according to the documentation, but I'm getting an error. Do i need to create a separate <Head> tag and put the script there? 

hook.js:608 Warning: Cannot render a sync or defer <script> outside the main document without knowing its order. Try adding async="" or moving it into the root <head> tag. Error Component Stack

on-recoverable-error.js:20 Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.


export default async function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {

  return (
    <html
      className={robotoFlex.className}
      suppressHydrationWarning={true}>
      
      <body
        className='bg-sc-light-bg text-foreground'
        suppressHydrationWarning={true}>
        <Providers>
          <Navbar />
          <GlobalLoader />
          {children}
        </Providers>
      </body>
<Script
        src={`https://cdn-cookieyes.com/client_data/${COOKIEYES_ID ?? ''}/script.js`}
        strategy='beforeInteractive'
      />
    </html>
  )
}

9 Replies

Avatar
Brown bear
is that your entire root layout file? be sure you've imported Script import Script from 'next/script'
Avatar
@Brown bear is that your entire root layout file? be sure you've imported Script `import Script from 'next/script'`
Avatar
CappleOP
Pretty much yea

I only have these as well

import Script from 'next/script'

const GTM_ID = process.env.NEXT_PUBLIC_GTM_ID ??

const COOKIEYES_ID = process.env.NEXT_PUBLIC_COOKIEYES_ID


Putting it into <head> tags fixed it, but it feels wrong?
Avatar
Brown bear
hmm... yeah, I can't find anything in the docs about it.
Avatar
Siamese Crocodile
Why don't we look up on the chatgpt.com?
Avatar
Brown bear
From a quick google, and based on your use of GTM, I'm guessing your adding google anayltics scripts? would this work for you? https://nextjs.org/docs/messages/next-script-for-ga
Also, are you using <head> or anything like Helmet anywhere?
From this github issue, it seems like <head> should not be used in nextjs at all, and you should use APIs like next/script or the built in SEO features instead.
Avatar
@Brown bear From a quick google, and based on your use of GTM, I'm guessing your adding google anayltics scripts? would this work for you? https://nextjs.org/docs/messages/next-script-for-ga
Avatar
CappleOP
It's not GTM, I'm using the next-third-party for GTM, that works correctly. I'm trying to use the CookieYes script. I'm not using <head> anywhere and I'm not using anything like Helmet. What's weird is that the error goes away if i put it inside <head>, opposite of what's inside the github issue