Missing <html> and <body> tags in the root layout. #87208
Description
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
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 15Which area(s) are affected? (Select all that apply)
Internationalization (i18n)
Which stage(s) are affected? (Select all that apply)
next dev (local)