Add suppressHydrationWarning to <html>

Add the React prop suppressHydrationWarning to the <html> element in RootLayout (src/app/layout.tsx) to suppress hydration mismatch warnings. This helps avoid noisy console warnings when server-rendered markup and client rendering differ (e.g., due to dynamic font class injection or other runtime-only differences).
This commit is contained in:
CanbiZ (MickLesk)
2026-04-01 17:14:17 +02:00
parent 1cf5b56652
commit 8a76dbe511
3 changed files with 17 additions and 14 deletions

View File

@@ -5,16 +5,15 @@ name: Node.js CI
on:
push:
branches: [ "main" ]
branches: ["main"]
pull_request:
branches: [ "main" ]
branches: ["main"]
permissions:
contents: read
jobs:
build:
runs-on: ubuntu-latest
strategy:
@@ -23,12 +22,12 @@ jobs:
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/
steps:
- uses: actions/checkout@v4
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
cache: 'npm'
- run: npm ci
- run: npm run build --if-present
- run: npm test
- uses: actions/checkout@v4
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
cache: "npm"
- run: npm ci
- run: npm run build --if-present
- run: npm test

View File

@@ -4,7 +4,7 @@ on:
push:
branches:
- main
workflow_dispatch:
workflow_dispatch:
permissions:
contents: write

View File

@@ -41,7 +41,11 @@ export default function RootLayout({
children,
}: Readonly<{ children: React.ReactNode }>) {
return (
<html lang="en" className={`${manrope.variable} ${jetbrainsMono.variable}`}>
<html
lang="en"
className={`${manrope.variable} ${jetbrainsMono.variable}`}
suppressHydrationWarning
>
<head>
<script
dangerouslySetInnerHTML={{