Server & Client Components

Messages from i18n/request.ts are available via useTranslations to components that execute on the server side.

If we want to use translations in async components, we can use getTranslations instead:

import {getTranslations} from 'next-intl/server';

export default async function HomePage() {
  const t = await getTranslations();

  return (
    <section className="flex flex-col gap-4">
      <h2 className="text-3xl font-semibold">{t('featuredApparel')}</h2>
      ...
    </section>
  );
}

This function can also be used in other async functions, like generateMetadata:

src/app/page.tsx

import {getTranslations} from 'next-intl/server';

export async function generateMetadata(): Promise<Metadata> {
  const t = await getTranslations();
  return {
    title: t('metaTitle')
  };
}

// ...

Additionally, by wrapping our app in NextIntlClientProvider, we can allow Client Components to access translations via useTranslations:

src/app/layout.tsx

import {NextIntlClientProvider} from 'next-intl';

// ...

export default function RootLayout({children}: Props) {
  // ...
  return (
    <html>
      <body>
        <NextIntlClientProvider>{children}</NextIntlClientProvider>
      </body>
    </html>
  );
}

Note that NextIntlClientProvider inherits configuration that is returned from i18n/request.ts automatically when it's rendered from a Server Component—there's no need to provide props.

Next lesson