fix: Next.js hydration warning in layout component

[naaa760]

Description

fixes: #2823

• Fixed a hydration mismatch warning that was appearing in the browser console when loading new blank projects. The issue was caused by browser extensions adding attributes to the body element during development, which caused Next.js to detect a mismatch between server-rendered and client-side HTML.

• Added suppressHydrationWarning to the body element in the layout component to resolve this warning while maintaining all existing functionality.

Related Issues

Fixes the reported hydration warning issue with blank projects

Type of Change

• Bug fix

Summary by CodeRabbit

• Bug Fixes
  • Improved initial page load stability by mitigating rare client/server render mismatches that could cause brief flickers or layout shifts.
• Chores
  • Suppressed non-critical hydration warnings to reduce noise in the browser console during development, improving developer experience without altering functionality.
  • No changes to features or user flows; overall behavior and appearance remain consistent while reducing edge-case rendering distractions.

[vercel]

@naaa760 is attempting to deploy a commit to the Onlook Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Walkthrough

Added the suppressHydrationWarning attribute to the body element in RootLayout within apps/web/client/src/app/layout.tsx. No other logic or control flow changes.

Changes

Cohort / File(s)	Summary
Layout hydration warning suppression apps/web/client/src/app/layout.tsx	Add body attribute suppressHydrationWarning in RootLayout JSX.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

I twitch my ears at warnings bright,
A tiny flag to hush the night—
In layout’s body, calm we keep,
Hydration whispers fall asleep.
Thump-thump! The build hops smooth and light. 🐇✨

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description Check	⚠️ Warning	The description covers the change details, related issue, and type of change but omits the required Testing section from the repository template, and it does not include an Additional Notes section to provide any extra context.	Please add a Testing section that describes how the fix was verified and include an Additional Notes section for any further context or instructions as specified by the template.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title succinctly describes the primary change by indicating the fix of a hydration warning in the Next.js layout component and follows conventional commit style, making it clear and specific enough for team members to understand the main purpose of the pull request.

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 53ec325 and 3d74558.

📒 Files selected for processing (1)

• apps/web/client/src/app/layout.tsx (1 hunks)

🧰 Additional context used

📓 Path-based instructions (8)

apps/web/client/src/app/**/*.tsx

📄 CodeRabbit inference engine (AGENTS.md)

apps/web/client/src/app/**/*.tsx: Default to Server Components; add 'use client' when using events, state/effects, browser APIs, or client‑only libraries
Do not use process.env in client code; import env from @/env instead

Avoid hardcoded user-facing text; use next-intl messages/hooks

Files:

• apps/web/client/src/app/layout.tsx

apps/web/client/src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

apps/web/client/src/**/*.{ts,tsx}: Use path aliases @/* and ~/* for imports that map to apps/web/client/src/*
Avoid hardcoded user-facing text; use next-intl messages/hooks instead

Use path aliases @/* and ~/* for imports mapping to src/*

Files:

• apps/web/client/src/app/layout.tsx

apps/web/client/src/**/*.tsx

📄 CodeRabbit inference engine (AGENTS.md)

apps/web/client/src/**/*.tsx: Create MobX store instances with useState(() => new Store()) for stable references across renders
Keep the active MobX store in a useRef and perform async cleanup with setTimeout(() => storeRef.current?.clear(), 0) to avoid route-change races
Avoid useMemo for creating MobX store instances
Avoid putting the MobX store instance in effect dependency arrays if it causes loops; split concerns by domain

apps/web/client/src/**/*.tsx: Create MobX store instances with useState(() => new Store()) for stable identities across renders
Keep the active MobX store in a useRef and clean up asynchronously with setTimeout(() => storeRef.current?.clear(), 0)
Do not use useMemo to create MobX stores
Avoid placing MobX store instances in effect dependency arrays if it causes loops; split concerns instead
observer components must be client components; place a single client boundary at the feature entry; child observers need not repeat 'use client'

Files:

• apps/web/client/src/app/layout.tsx

apps/web/client/src/app/layout.tsx

📄 CodeRabbit inference engine (AGENTS.md)

Preserve dark theme defaults via ThemeProvider usage in the root layout

Preserve dark theme defaults via ThemeProvider in the root layout

Files:

• apps/web/client/src/app/layout.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Do not use the any type unless necessary

Files:

• apps/web/client/src/app/layout.tsx

apps/web/client/src/app/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

Default to Server Components; add 'use client' only when using events, state/effects, browser APIs, or client-only libs

Files:

• apps/web/client/src/app/layout.tsx

apps/web/client/src/app/{page,layout,route}.tsx

📄 CodeRabbit inference engine (CLAUDE.md)

Follow App Router file conventions (page.tsx, layout.tsx, route.ts) within src/app

Files:

• apps/web/client/src/app/layout.tsx

{apps,packages}/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

Avoid using the any type unless absolutely necessary

Files:

• apps/web/client/src/app/layout.tsx

🔇 Additional comments (1)

apps/web/client/src/app/layout.tsx (1)

74-74: Hydration warning suppression is appropriate.

Adding suppressHydrationWarning on the <body> complements the existing <html> attribute and prevents noisy warnings from extension-induced mutations without altering our server-rendered markup.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}