Custom script in <head> with app router #50772

jafargas · 2023-06-05T04:06:55Z

jafargas
Jun 5, 2023

Hi there,

I've been working on adding dark mode support to my app (which uses the new app router) and ran into the need to add the custom script shown below to <head>, basically just like it's done in https://tailwindcss.com/. So far, I haven't found a way to do it with the app router. Any tips on how to accomplish this?

In general, if this doesn't exist yet, support for scripts in <head> would be helpful.

Thanks

<script>
    try {
        if (localStorage.theme === 'dark' || (!('theme'in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            document.documentElement.classList.add('dark')
        } else {
            document.documentElement.classList.remove('dark')
        }
    } catch (_) {}
</script>

devjiwonchoi · 2023-06-05T05:50:48Z

devjiwonchoi
Jun 5, 2023
Maintainer

You can use the Script tag as inline script.

Inline scripts, or scripts not loaded from an external file, are also supported by the Script component. They can be written by placing the JavaScript within curly braces:

Example:

<Script id="show-banner">
  {`document.getElementById('banner').classList.remove('hidden')`}
</Script>

Reference

Optimizing Inline Scripts: https://nextjs.org/docs/app/building-your-application/optimizing/scripts#inline-scripts

0 replies

jafargas · 2023-06-05T15:35:05Z

jafargas
Jun 5, 2023
Author

Thanks @devjiwonchoi. I did that. The problem is that I need the inline script to be placed in <head>, not towards the bottom of <body>. For my particular use case, that matters because this script is setting the color theme and doing that later in <body> results in poor user experience as the page loads in one color mode and then switches to the other color mode once the document is already visible.

6 replies

icyJoseph Jun 5, 2023

You can use the beforeInteractive strategy:

import Script from "next/script";
import "./globals.css";
import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"] });

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        {children}

        <Script
          id="important-script"
          strategy="beforeInteractive"
          dangerouslySetInnerHTML={{
            __html: `
         try {
          if (localStorage.getItem("theme") === 'dark' || (localStorage.getItem("theme") === null && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
              document.documentElement.classList.add('dark')
          } else {
              document.documentElement.classList.remove('dark')
          }
      } catch (_) {}
        
        `,
          }}
        ></Script>
      </body>
    </html>
  );
}

BUT!

You'll inevitably, for dark mode users, create a hydration error, because the HTML sent by the server will diverge from what the client sees.

I think a pure CSS solution is best here.

:root {
  background: #dca;
  color: #731;
}
@media (prefers-color-scheme: dark) {
  :root {
    background: #753;
    color: #dcb;
    outline: 5px dashed #000;
  }
}

Cookies maybe?

Now, we face the issue of what if the user has different setting than their preferred colour scheme, as in, I prefer dark mode, but for this site I've chose the light mode through their UI. Then a cookie would be nice, but I think there has been issues using it in layout, don't quote me on that, and it'll also opt you into on-demand rendering.

import "./globals.css";
import { Inter } from "next/font/google";
import { cookies } from "next/headers";

const inter = Inter({ subsets: ["latin"] });

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" className={cookies().get("theme")?.value ?? ""}>
      <body className={inter.className}>
        {children}
      </body>
    </html>
  );
}

I actually don't know for sure if cookies has issues, I've seen bug reports, but probably, it was just user misusage. It'll opt you into dynamic rendering though

Just hacking to get it done

A layout effect might work, but you need to invoke useIsomorphicLayoutEffect to opt-out from server side complaints, and it needs some trickery to prevent opting the layout into use client:

import "./globals.css";
import { Inter } from "next/font/google";
import { MutateRootClassName } from "./MutateRootClassName";

const inter = Inter({ subsets: ["latin"] });

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <MutateRootClassName />
      <body className={inter.className}>{children}</body>
    </html>
  );
}

And then MutateRootClassName would do this hacky thing:

https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect

"use client";

import { useLayoutEffect, useEffect } from "react";

const useIsomorphicLayoutEffect =
  typeof window !== "undefined" ? useLayoutEffect : useEffect;

export const MutateRootClassName = () => {
  // when the server sees this, it sees useEffect, the client see useLayoutEffect
  useIsomorphicLayoutEffect(() => {
    try {
      if (
        localStorage.getItem("theme") === "dark" ||
        (localStorage.getItem("theme") === null &&
          window.matchMedia("(prefers-color-scheme: dark)").matches)
      ) {
        document.documentElement.classList.add("dark");
      } else {
        document.documentElement.classList.remove("dark");
      }
    } catch (_) {}
  }, []);

  return null;
};

Tough life 😅 - perfect dark mode handling is tricky... I think the cookies was best, when it didn't automatically opted in to dynamic rendering. In the useIsomorphicLayoutEffect , and your approach, you won't necessarily detect when the user changes their settings, other than through a refresh or polling of the localStorage. Thankfully you can add an event listener to window.matchMedia("(prefers-color-scheme: dark)") and react to those events.

jafargas Jun 6, 2023
Author

Thanks @devjiwonchoi and @icyJoseph!

I tried the useIsomorphicLayoutEffect approach just like in your example and, while no errors are thrown, the code is executed too late (after all the server-side rendered components are first displayed) so there's a short period of time where the screen is white before turning dark. The script is not included in the initial HTML response, but in a js file that is loaded only later once hydration happens.
Note: @gerardnico my previous response was clearly nonsense since I could have just used useLayoutEffect inside a nested component like @icyJoseph suggested above, which is what I think you meant to suggest.

Some more context

My goal is to support dark mode and for the user to be able to override the system preference. So I can't just use the @media (prefers-color-scheme: dark) media query unfortunately (that would make things way more elegant).
So basically what I have done is:

Using tailwind css, set darkMode: 'class' in tailwind.config.js (as opposed to using media)
implemented a solution that uses cookies and the Sec-Ch-Prefers-Color-Scheme header if available (works only on Chrome) to determine on the server side whether to include the dark class in <html>
On the client side, I let the user select between three modes: system (default), light, and dark and update the cookie and localStorage accordingly

This works pretty well, with one exception: the first time a user visits the website the server side has no info to make a determination so it defaults to light mode when, ideally, I would like to return light or dark based on the user system preferences. Obviously that's not possible because the cookie or the Sec-Ch-Prefers-Color-Scheme header don't exist yet.

Sooo... following tailwindcss.com's example, I tried using the script above to adjust the <html> class as soon as the page loads. I tried injecting the <script>...<script> in <head> with the help of a proxy, and it works like a charm (executed before anything is rendered on screen and doesn't result in any hydration errors). I just tried injecting the script at the very beginning of <body> using the same proxy and that also works just fine.

Recap so far

Trying to insert this code to dynamically update the class of the <html> element as soon as the page loads:

try {
      if (
        localStorage.getItem("theme") === "dark" ||
        (localStorage.getItem("theme") === null &&
          window.matchMedia("(prefers-color-scheme: dark)").matches)
      ) {
        document.documentElement.classList.add("dark");
      } else {
        document.documentElement.classList.remove("dark");
      }
    } catch (_) {}
  }, []);

What works

Manually injecting the code in a <script> inside <head> or inside <body>, using a proxy. In dark mode, the page never renders in white and goes straight to dark mode
I guess I could write some middleware to modify the response to achieve the same in next.js, but I will hold off on that for now :)

What doesn't work

Adding code in useEffect or useLayoutEffect, even when added to the first component in <body> and using the useIsomorphicLayoutEffect approach. All these approaches result in the code being loaded and executed too late.
This results in hydration errors.

It's not a huge deal but it's too bad I can't find a way to do this with the app router given that others like tailwindcss.com are doing exactly what I need successfully.

jafargas Jun 6, 2023
Author

I got it to work by simply slapping a plain <script> element in the <body> 😅. No errors/warnings during build and the runtime seems perfectly happy with this. Is it really that simple or are there any gotchas with this approach?

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  
  return (
    <html lang="en">
      <body className={`${inter.className} bg-zinc-50 dark:bg-zinc-900 text-zinc-900 dark:text-zinc-50`}>
       <script dangerouslySetInnerHTML={{
          __html: `
            try {
              if (localStorage.getItem("theme") === 'dark' || (localStorage.getItem("theme") === null && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
                  document.documentElement.classList.add('dark')
              } else {
                  document.documentElement.classList.remove('dark')
              }
            } catch (_) {}
          `,
        }}>
        </script>
        {children}
      </body>
    </html>
  )
}

altano Jul 17, 2023

@jafargas I've been struggling with the same issue. Your <script> solution works but produces a console warning in the browser (in dev mode).:

Warning: Extra attributes from the server: class

Or if I have a hard-coded class, e.g. theme-basic, I'd get a warning like:

Warning: Prop className did not match. Server: "theme-basic light" Client: "theme-basic"

Do you see that too or am I just not replicating what you're doing properly? I'm on next@13.4.10 fwiw.

PHANTOMS0308 Aug 13, 2023

@altano I was trying to solve the same problem @jafargas was having, and I gotta say his <script> inside <body> method works like a charm. And I also see this warning in dev mode, which I believe is just server side rendering result is different from the client side, which in this case, is the added class = 'dark'. I mean this is inevitable, and honestly such dismatch is exactly what we want. I put suppressHydrationWarning = {true} at the <html> level, and the warning is gone.

gerardnico · 2023-06-05T20:37:29Z

gerardnico
Jun 5, 2023

May be useLayoutEffect ?

1 reply

rezof Jul 6, 2023

@gerardnico using any hook will result in a flash of style change

timothyerwin · 2023-08-22T23:46:57Z

timothyerwin
Aug 22, 2023

this is absolutely a terrible design. was it that difficult to leave the <Head> tag there?

0 replies

jafargas · 2023-08-22T23:50:26Z

jafargas
Aug 22, 2023
Author

The problem is that while it looks better, it doesn't achieve the desired goal of loading right away with the proper color mode, because the Script tag is placed at the end of the DOM and only gets executed once the page has loaded.

…

On Sun, Jun 4, 2023 at 22:51 최지원 ***@***.***> wrote: You can use the Script tag as inline script. Inline scripts, or scripts not loaded from an external file, are also supported by the Script component. They can be written by placing the JavaScript within curly braces: Example: <Script id="show-banner"> {`document.getElementById('banner').classList.remove('hidden')`}</Script> Reference - Optimizing Inline Scripts: https://nextjs.org/docs/app/building-your-application/optimizing/scripts#inline-scripts — Reply to this email directly, view it on GitHub <#50772 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA5NROCRI66RREDFVAE2QCTXJVXUJANCNFSM6AAAAAAY2M2S3Y> . You are receiving this because you authored the thread.Message ID: ***@***.***>

1 reply

timothyerwin Aug 23, 2023

yes, I am referring to the change in the app router to remove head tag and do metadata thing

jafargas · 2023-08-23T00:18:23Z

jafargas
Aug 23, 2023
Author

Got it. Following the thread over email wasn't a good idea. Thanks

…

On Tue, Aug 22, 2023 at 17:08 Tim Erwin ***@***.***> wrote: yes, I am referring to the change in the app router to remove head tag and do metadata thing — Reply to this email directly, view it on GitHub <#50772 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA5NROFLLOWBSQFU4YOHHXLXWVCWDANCNFSM6AAAAAAY2M2S3Y> . You are receiving this because you were mentioned.Message ID: <vercel/next .***@***.***>

0 replies

Yongveloper · 2023-12-29T16:51:22Z

Yongveloper
Dec 29, 2023

Did you solve it? I'm experiencing the same problem.

0 replies

Your-Ehsan · 2024-01-02T10:18:27Z

Your-Ehsan
Jan 2, 2024

anybody have Idea that how can i add custom script in head tag. I am using app router.

0 replies

jserrao · 2024-01-02T13:47:00Z

jserrao
Jan 2, 2024

If you read the fine print on the beforeInteractive section of the <Script> Next 14 docs page, you'll see this little nugget buried in there:

Good to know: Scripts with beforeInteractive will always be injected inside the head of the HTML document regardless of where it's placed in the component.

So scripts will look something like this now:

export default async function Application({ children }) {
  const menu = await getMenu();

  return (
    <html lang="en-US">
      <body>
        <Providers>
          ...
        </Providers>
      </body>
      <Script
        src="your-script-here.js"
        strategy="beforeInteractive"
      />
    </html>
  );
}

I know they say it doesn't matter where you place the script, but if you to maintain your sanity, it makes sense to colocate them into app/layout.js or app/layout.tsx but below the <body>. At least for me, this makes sense as the layout file is similar to the old _app.js from the pages router days.

I've also found you can just keep using the <Head> tag with /app router for now at least. It works well in Next 14 even though the docs don't mention it, so I suspect this will stop at some point (maybe 15)?. The replacement for next/head solution is a very custom implementation they are calling Metadata. It doesn't handle Script though, which is compounds the confusion.

2 replies

Your-Ehsan Jan 2, 2024

Thanks @jserrao this helps me a lot

columk1 Sep 25, 2024

Using the <Script /> component with beforeInteractive in the app router didn't work for me. It still runs after the body has rendered and causes a flash.

Using a regular tag with the script in layout.ts worked really well and now I have persisting themes with no FOUC.

ajgalbraith · 2024-03-25T02:46:50Z

ajgalbraith
Mar 25, 2024

"Good to know: Scripts with beforeInteractive will always be injected inside the head of the HTML document regardless of where it's placed in the component." -https://nextjs.org/docs/app/api-reference/components/script

If you want the script to be in the head.

1 reply

columk1 Sep 25, 2024

This will run before hydration but not before the initial page is rendered so it will still cause a flash of unstyled content.

codal-umistri · 2024-09-06T06:53:50Z

codal-umistri
Sep 6, 2024

Does anyone know how to get rid of the extra scrolling that appears?

code :-
`'use client';
import React, { useEffect } from 'react';
import { InlineWidget } from 'react-calendly';

interface ScheduleMeeting {
url: string;
}

const ScheduleMeeting: React.FC = ({ url }) => {
return (

);
};

export default ScheduleMeeting;`

0 replies

tri-bit · 2024-11-12T18:53:26Z

tri-bit
Nov 12, 2024

I think i have a solution putting the theme setting code into a client js file (in the public folder) + dangerously setting html to include the script. In the root layout.tsx:

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

  <body className="bg-white dark:bg-black dark:text-white">
    <div dangerouslySetInnerHTML={{ __html: '<script src="/js/client.js"></script>' }}></div>
  {children}
  </body>

</html>

)
}

0 replies

Custom script in <head> with app router #50772

Replies: 12 comments · 11 replies

devjiwonchoi Jun 5, 2023 Maintainer

Reference

jafargas Jun 5, 2023 Author

BUT!

Cookies maybe?

Just hacking to get it done

jafargas Jun 6, 2023 Author

Some more context

Recap so far

What works

What doesn't work

jafargas Jun 6, 2023 Author

jafargas Aug 22, 2023 Author

jafargas Aug 23, 2023 Author

Replies: 12 comments 11 replies

devjiwonchoi
Jun 5, 2023
Maintainer

jafargas
Jun 5, 2023
Author

jafargas Jun 6, 2023
Author

jafargas Jun 6, 2023
Author

jafargas
Aug 22, 2023
Author

jafargas
Aug 23, 2023
Author