Trying to use i18n without Hydration Error
Answered
CuzImPhilipp posted this in #help-forum
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:
And the current error it throws using this is:
Its my first time trying to make nextjs app multilangue so please dont judge me that badly
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 case5 Replies
also Im using it SSR becuase Im setting Meta data using next Metadata import but I left them out for privacy reasons
anyone?
@CuzImPhilipp 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: tsx
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
Atlantic salmon
My 1 second Google search tells me this is a known problem with some known solutions
https://github.com/vercel/next.js/issues/51477
https://github.com/vercel/next.js/issues/51477
Atlantic salmon
Looks like
next-intl offers a next-intl/server package exactly for this use caseAnswer
Yeah that works sorry for being silly