I'd like to start by expressing my gratitude for the next-intl library. It's been immensely helpful and I truly appreciate the work put into it. Thank you!
I'm currently utilizing a shared component and implementing useTranslation in it as follows:
// Not on the client side
function SomeComponent() {
const t = useTranslations("topPage");
return <div>{t("test")}</div>;
}
However, upon deploying to Vercel, I encounter an error during the build process, affecting all components that use useTranslation in a shared component.
Error: Usage of next-intl APIs in Server Components currently opts into dynamic rendering. This limitation will eventually be lifted, but as a stopgap solution, you can use the `unstable_setRequestLocale` API to enable static rendering, see https://next-intl-docs.vercel.app/docs/getting-started/app-router-server-components#static-rendering
-- [Error Trace]
I have reviewed the documentation (https://next-intl-docs.vercel.app/docs/getting-started/app-router#static-rendering) and understand the necessity of adding unstable_setRequestLocale to all layouts and pages.
My question is whether we should also add unstable_setRequestLocale to every shared component.
You don't have to call unstable_setRequestLocale in the component itself but in the page.tsx or layout.tsx. Also, This step requires exporting generateStaticParams function.
// app/page.tsx to opt out dynamic rendering in this page
import {locals} from "path/to/constants";
export function generateStaticParams() {
return localse.map(locale => ({ locale }))
}
export default function Page({params}) {
unstable_setRequestLocale(params.locale)
return <div>content</div>
}