Next-intl - missing HTML and Body in root layout

Unanswered

Rhinelander posted this in #help-forum

RhinelanderOP

2025-04-26T14:10:05.394Z

So I know what the error is but I am asking how to bypass that - hack. I am trying to do this https://github.com/amannn/next-intl/tree/main/examples/example-app-router-mixed-routing/src - Mixed routing for next-intl. Protected routes read from user settings while marketing pages read from URL.

This is how my RootLayout looks like:

import type { ReactNode } from "react";
import "./globals.css";

type Props = {
  children: ReactNode;
};

export default function RootLayout({ children }: Props) {
  return children;
}

Error: Missing <html> and <body> tags in the root layout.
I have 2 layouts after that one for protected and one for public pretty straight forward (seen on the image). I

4 Replies

RhinelanderOP

2025-04-26T14:36:53.791Z

export default async function ProtectedLayout({ children }: PropsWithChildren) {
  const locale = await getLocale();

  if (!locale) {
    notFound();
  }

  return (
    <Providers>
      <NextIntlClientProvider locale={locale}>
        {children}
      </NextIntlClientProvider>
    </Providers>
  );
}

export default async function PublicLayout({
  children,
  params,
}: RootLayoutProps) {
  const { locale } = await params;

  if (!hasLocale(routing.locales, locale)) {
    notFound();
  }

  return (
    <Providers>
      <NextIntlClientProvider locale={locale}>
        {children}
      </NextIntlClientProvider>
    </Providers>
  );
}

export default function RootLayout({ children }: PropsWithChildren) {
  return (
    <html lang="en" className={fontSans.className} suppressHydrationWarning>
      <body className="min-h-screen bg-background antialiased">
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

This is my current solution. I could use a feedback.