Internationalization of Server & Client Components in Next.js

With the introduction of the App Router in Next.js 13, React Server Components (opens in a new tab) became publicly available. This new paradigm allows components that don’t require React’s interactive features, such as useState and useEffect, to remain server-side only.

If internationalization is implemented entirely on the server side, we can achieve new levels of performance for our apps, leaving the client side for interactive features.

Passing translations to Client Components

If you need to use translations or other functionality from next-intl in Client Components, the best approach is to pass the processed labels as props or children from a Server Component.

import {useTranslations} from 'next-intl';
import Expandable from './Expandable';
 
export default function FAQEntry() {
  const t = useTranslations('FAQEntry');
  return (
    <Expandable title={t('title')}>
      <FAQContent content={t('description')} />
    </Expandable>
  );
}

'use client';
 
import {useState} from 'react';
 
function Expandable({title, children}) {
  const [expanded, setExpanded] = useState(false);
 
  function onToggle() {
    setExpanded(!expanded);
  }
 
  return (
    <div>
      <button onClick={onToggle}>{title}</button>
      {expanded && <div>{children}</div>}
    </div>
  );
}

As you can see, we can use interactive features from React like useState on translated content, even though the translation only runs on the server side.

Using interactive state in translations

You might run into cases where you have dynamic state, such as pagination, that should be reflected in translated messages.

function Pagination({curPage, totalPages}) {
  const t = useTranslations('Pagination');
  return <p>{t('info', {curPage, totalPages})}</p>;
}

You can still manage your translations on the server side by using page- or search params (opens in a new tab). There's an article on Smashing Magazine about using next-intl in Server Components (opens in a new tab) which explores this topic in more detail, specifically the section about adding interactivity (opens in a new tab).

Apart from page- or search params, you can also use cookies (opens in a new tab) or database state (opens in a new tab) for storing state that can be read on the server side.

If you absolutely need to use functionality from next-intl on the client side, you can wrap the respective components with NextIntlClientProvider.

import pick from 'lodash/pick';
import {useLocale, NextIntlClientProvider} from 'next-intl';
import ClientCounter from './ClientCounter';
 
async function Counter() {
  const locale = useLocale();
  const messages = (await import(`../../../../messages/${locale}.json`))
    .default;
 
  return (
    <NextIntlClientProvider
      locale={locale}
      messages={
        // Only provide the minimum of messages
        pick(messages, 'ClientCounter')
      }
    >
      <ClientCounter />
    </NextIntlClientProvider>
  );
}

(working example (opens in a new tab))