Next.js Discord

Discord Forum

Error "The following tags are missing in the Root Layout: <html>, <body>." with next-intl

Unanswered
California pilchard posted this in #help-forum
Open in Discord
California pilchardOP
Ive recently create a new project with a fresh install of NextJS 15 (v15.1.7) and next-intl (v^3.26.3). There is my architecture :

2 Replies

California pilchardOP
Very simple one, there is the layout.tsx (in /app/[locale]/layout.tsx) :
export default async function LocaleLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
    // NEXT-INTL
    const userMessages = await getMessages({ locale });
    const fallbackMessages = await getMessages({ locale: getFallbackLanguage({ locale }) });
    const messages = deepmerge(fallbackMessages, userMessages);
    return (
    <html lang={locale} suppressHydrationWarning>
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <NextIntlClientProvider locale={locale} messages={messages}>
          <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem={true}
          disableTransitionOnChange={true}
          >
            {children}
          </ThemeProvider>
        </NextIntlClientProvider>
      </body>
    </html>
    );
}

But there is the catch. When I go to http://localhost:3000/ I see my page its working well. Also with http://localhost:3000/fr (currently have en and fr supported locale). But when I go to something like :
http://localhost:3000/otherpage
or http://localhost:3000/fr/anythingelse

I have this error :
Missing required html tags
The following tags are missing in the Root Layout: <html>, <body>.
Read more at https://nextjs.org/docs/messages/missing-root-layout-tags

There is my middleware :
import createMiddleware from 'next-intl/middleware';
import { routing } from '@/lib/i18n/routing';
import { locales } from './lib/i18n/locales';
 
export default createMiddleware(routing);
 
export const config = {
  matcher: [
    '/((?!api|_next|_vercel|.*\\..*).*)',
    // '/',
    // `/(${locales.join('|')})/:path*`
  ]
};
California pilchardOP
any idea ?