refactor(nextjs-example): use next/script for initial appearance preload

Copilot · IzumiSy · web-flow · commit e0bd797acb04 · 2026-05-18T02:30:55.000Z
Agent-Logs-Url: https://github.com/tailor-platform/app-shell/sessions/08329a5f-d86d-4778-8393-a5757806ebae Co-authored-by: IzumiSy <982850+IzumiSy@users.noreply.github.com>
diff --git a/docs/api/use-theme.md b/docs/api/use-theme.md
@@ -185,13 +185,16 @@ The package exports **`getInitialAppearanceScript()`** which returns a tiny scri
 
 ```tsx
 // app/layout.tsx (Next.js App Router)
+import Script from "next/script";
 import { getInitialAppearanceScript } from "@tailor-platform/app-shell/initial-appearance";
 
 export default function RootLayout({ children }) {
   return (
     <html lang="en" suppressHydrationWarning>
       <head>
-        <script dangerouslySetInnerHTML={{ __html: getInitialAppearanceScript() }} />
+        <Script id="app-shell-initial-appearance" strategy="beforeInteractive">
+          {getInitialAppearanceScript()}
+        </Script>
       </head>
       <body>{children}</body>
     </html>
diff --git a/examples/nextjs-app/src/app/layout.tsx b/examples/nextjs-app/src/app/layout.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import Script from "next/script";
 import { Geist, Geist_Mono } from "next/font/google";
 import { getInitialAppearanceScript } from "@tailor-platform/app-shell/initial-appearance";
 import "@tailor-platform/app-shell/styles";
@@ -28,7 +29,9 @@ export default function RootLayout({
     <html lang="en" suppressHydrationWarning>
       <head>
         {/* Apply stored appearance before paint to avoid FOUC + hydration warnings. */}
-        <script dangerouslySetInnerHTML={{ __html: getInitialAppearanceScript() }} />
+        <Script id="app-shell-initial-appearance" strategy="beforeInteractive">
+          {getInitialAppearanceScript()}
+        </Script>
       </head>
       <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>{children}</body>
     </html>
