docs(examples): update App Router example to avoid hydration mismatch

primer · Feb 26, 2024 · b7fee53 · b7fee53
1 parent e1dbd6a
commit b7fee53
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/examples/app-router/package.json b/examples/app-router/package.json
@@ -3,7 +3,9 @@
   "private": true,
   "scripts": {
     "clean": "rimraf .next",
+    "build": "next build",
     "develop": "next",
+    "start": "next start",
     "type-check": "tsc --noEmit"
   },
   "dependencies": {

diff --git a/examples/app-router/src/app/layout.tsx b/examples/app-router/src/app/layout.tsx
@@ -8,7 +8,9 @@ export const metadata = {
 
 export default function RootLayout({children}: {children: React.ReactNode}) {
   return (
-    <html lang="en">
+    // Note: the `ThemeProvider` component will set attributes on `html` once
+    // they load on the client that will cause a hydration mismatch
+    <html lang="en" suppressHydrationWarning>
       <body>
         <StyledComponentsRegistry>
           <ThemeProvider>