vj/monthlytracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix hydration mismatch from theme blocking script

Browse Source 
The inline script adds the 'dark' class to <html> before React hydrates,
causing a server/client className mismatch. suppressHydrationWarning on
<html> is the standard Next.js fix for this pattern.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Vijayakanth Manoharan
2026-03-23 22:15:34 -04:00
parent 48b481999d
commit 2dae000342
1 changed files with 1 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/layout.tsx
View File

@@ -42,6 +42,7 @@ export default function RootLayout({
<html <html
lang="en" lang="en"
className={`${headingFont.variable} ${bodyFont.variable} h-full antialiased`} className={`${headingFont.variable} ${bodyFont.variable} h-full antialiased`}
suppressHydrationWarning
> >
<head> <head>
<script dangerouslySetInnerHTML={{ __html: themeScript }} /> <script dangerouslySetInnerHTML={{ __html: themeScript }} />