set html lang attribute from locale at server render time#436
Merged
JeremyDev87 merged 2 commits intomasterfrom Feb 16, 2026
Merged
set html lang attribute from locale at server render time#436JeremyDev87 merged 2 commits intomasterfrom
JeremyDev87 merged 2 commits intomasterfrom
Conversation
…er time (#412) Move <html> and <body> tags from root layout to [locale]/layout.tsx so the lang attribute is set correctly during server rendering. This follows the next-intl recommended pattern where the root layout is a pass-through and the locale layout owns the document shell. - Convert root layout to pass-through (return children) - Move fonts, ThemeProvider, Toaster, skip-link to locale layout - Remove SetDocumentLang client component (no longer needed) - Update tests for new layout structure
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
JeremyDev87
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Closes #412
return children) following the next-intl recommended pattern<html>,<body>, fonts,ThemeProvider,Toaster, and skip-to-content link into[locale]/layout.tsxwith<html lang={locale}>SetDocumentLangclient component (no longer needed since lang is set at server render time)Problem
<html lang="en">was hardcoded in the root layout regardless of the active locale. Screen readers and search engines received an incorrect lang attribute from the initial server-rendered HTML. TheSetDocumentLangclient component only corrected this after hydration.Solution
Adopted the next-intl recommended architecture where:
childrendirectly[locale]/layout.tsx) owns the full document shell with<html lang={locale}>This ensures the correct
langattribute is present in the very first byte of server-rendered HTML.Verification
tsc --noEmit)en.html<html lang="en">ko.html<html lang="ko">es.html<html lang="es">ja.html<html lang="ja">zh-CN.html<html lang="zh-CN">Test plan
/ko— verify<html lang="ko">/en— verify<html lang="en">