Next.js Discord

Discord Forum

Trying to use i18n without Hydration Error

Answered
Pacific sandlance posted this in #help-forum
Open in Discord
Pacific sandlanceOP
Hi, Im trying to use I18n (next-intl) to support multiple langues, I got that working but now I get a hydration error regarding the html language attribute I tried fixing it with trying to get the language code from it in the RootLayout but that now apparently created a React bug

RootLayout: 
import { useLocale } from 'next-intl'; 
import type { Metadata } from 'next/';
import './globals.css';



export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const locale: string | null = useLocale();

  if (!locale) {
    return (
      <html lang="en">
        <body>{children}</body>
      </html>
    );
  }

  return (
    <html lang={locale}>
      <body>{children}</body>
    </html>
  );
}


And the current error it throws using this is: 
 ⨯ [Error: failed to pipe response] {
  [cause]: [Error: Expected a suspended thenable. This is a bug in React. Please file an issue.] {
    digest: '636084327'
  }
}


Its my first time trying to make nextjs app multilangue so please dont judge me that badly
Answered by Atlantic salmon
Looks like next-intl offers a next-intl/server package exactly for this use case
View full answer

5 Replies

Pacific sandlanceOP
also Im using it SSR becuase Im setting Meta data using next Metadata import but I left them out for privacy reasons
Pacific sandlanceOP
anyone?
Atlantic salmon
Looks like next-intl offers a next-intl/server package exactly for this use case
Answer
Pacific sandlanceOP
Yeah that works sorry for being silly