DocumentationFile Layout

Documentation / Architecture

Root Layout File

Global HTML shell, metadata, font, and pre-hydration theme bootstrap script. File-level ownership and maintenance notes.

Architecture6 min

File

Source file: app/layout.tsx.

Global HTML shell, metadata, font, and pre-hydration theme bootstrap script.

app/layout.tsx

Responsibilities

This file owns the following project behavior.

  • Set document language and metadata.
  • Load global CSS.
  • Apply theme and primary color before hydration.
  • Use suppressHydrationWarning for intentional pre-hydration root mutations.

Change risks

Review these risks before editing this file.

  • Removing the bootstrap script can cause theme flicker.
  • Changing localStorage keys here must match AppShell.
  • Removing suppressHydrationWarning can reintroduce hydration warnings.
  • Run TypeScript and production build after changes.
  • Smoke test affected routes after deployment.

Related

Other topics in the Architecture category.

ArchitectureProject Structure

The folder layout and the responsibility of each top-level area.

8 minArchitectureRouting

How static routes, dynamic routes, redirects, and 404 behavior are organized.

7 minArchitectureLayout

Global layout, dashboard layout, AppShell, and standalone page layout responsibilities.

8 min