next-intl: Issue with `useTranslation` in Shared Components Deployed to Vercel

Question

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.

Answer 1

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>
}