Issue Station
Sign In
Tools hereToolbox

nextjs - 💡(How to fix) Fix Missing <html> and <body> tags in the root layout. [5 comments, 3 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
vercel/next.js#87208•Fetched 2026-04-08 02:07:34
View on GitHub
Comments
5
Participants
3
Timeline
13
Reactions
1
Author
aymericzipaymericzip
Participants
aymericzipaymericzipCaarLo1337CaarLo1337tharani-2006tharani-2006
Timeline (top)
commented ×5mentioned ×3subscribed ×3issue_type_added ×1

Error Message

However, since the root html tag is no longer present in the root layout, I start getting this error randomly: Note that I can click outside and load the page. Sometimes refreshing the page makes the error disappear and everything works as expected (prod & dev). But in dev mode, each time we load a new page, this error pop up, which breaks considerably the DX. Remove this error if one of the children layout contain the html and body element The error started appearing minimum since nextjs 15

Fix Action

Fix / Workaround

Note that this can be fixed by switching the lang attribute dynamically with a custom hook like:

Code Example

export const useI18nHTMLAttributes = () => {
  const { locale } = useLocale();

  useEffect(() => {
    document.documentElement.lang = locale;
  }, [locale]);
};

---

Any platform 

The error started appearing minimum since nextjs 15
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://github.com/aymericzip/intlayer-next-16-template

To Reproduce

Start dev server, and load /about, or any other page

Current vs. Expected behavior

Hi, I created Intlayer, an i18n solution.

I recommend using a [locale] slug to prefix pages per locale (e.g., /about → English, /fr/about → French).

To set <html lang={locale} />, we have to move the html and body tags from the root layout to [locale]/layout.tsx.

Note that this can be fixed by switching the lang attribute dynamically with a custom hook like:

export const useI18nHTMLAttributes = () => {
  const { locale } = useLocale();

  useEffect(() => {
    document.documentElement.lang = locale;
  }, [locale]);
};

But to make it work with SSR, I’d avoid that.

However, since the root html tag is no longer present in the root layout, I start getting this error randomly:

Missing <html> and <body> tags in the root layout. Read more at https://nextjs.org/docs/messages/missing-root-layout-tags

<img width="880" height="415" alt="Image" src="https://github.com/user-attachments/assets/96a2c2bf-de11-42d5-8284-c3fa5676f864" />

Note that I can click outside and load the page. Sometimes refreshing the page makes the error disappear and everything works as expected (prod & dev). But in dev mode, each time we load a new page, this error pop up, which breaks considerably the DX.

Recommended fix : Remove this error if one of the children layout contain the html and body element

Provide environment information

Any platform 

The error started appearing minimum since nextjs 15

Which area(s) are affected? (Select all that apply)

Internationalization (i18n)

Which stage(s) are affected? (Select all that apply)

next dev (local)

extent analysis

TL;DR

Modify the Next.js layout to conditionally ignore the missing <html> and <body> tags error when a child layout contains these elements.

Guidance

  • Review the Next.js documentation on missing root layout tags to understand the requirements for the root layout.
  • Consider implementing a custom solution to dynamically set the lang attribute, while ensuring Server-Side Rendering (SSR) compatibility.
  • Investigate the possibility of conditionally ignoring the error when a child layout contains the required <html> and <body> tags.
  • Verify that the issue is specific to Next.js version 15 and later, and explore potential version-specific fixes or workarounds.

Example

// Example of a custom hook to set the lang attribute
export const useI18nHTMLAttributes = () => {
  const { locale } = useLocale();

  useEffect(() => {
    document.documentElement.lang = locale;
  }, [locale]);
};

Notes

The provided information suggests that the issue is related to the removal of the <html> and <body> tags from the root layout, and the introduction of a custom useI18nHTMLAttributes hook. However, the exact cause of the error and the optimal solution may depend on additional factors, such as the specific Next.js version and configuration.

Recommendation

Apply a workaround to conditionally ignore the missing <html> and <body> tags error when a child layout contains these elements, as this approach is likely to provide a temporary fix while a more permanent solution is developed.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…
#ssr#latency issue#model loading#dependency error#configuration error

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING