Skip to content
Docs
Pages Router

Next.js Pages Router internationalization (i18n)

While it's recommended to use next-intl with the App Router, the Pages Router is still fully supported.

  1. npm install next-intl
  2. Set up internationalized routing (opens in a new tab)
  3. Add the provider in _app.tsx
_app.tsx
import {NextIntlClientProvider} from 'next-intl';
import {useRouter} from 'next/router';
 
export default function App({Component, pageProps}) {
  const router = useRouter();
 
  return (
    <NextIntlClientProvider
      locale={router.locale}
      timeZone="Europe/Vienna"
      messages={pageProps.messages}
    >
      <Component {...pageProps} />
    </NextIntlClientProvider>
  );
}
  1. Provide messages on a page-level
pages/index.tsx
export async function getStaticProps(context) {
  return {
    props: {
      // You can get the messages from anywhere you like. The recommended
      // pattern is to put them in JSON files separated by locale and read
      // the desired one based on the `locale` received from Next.js.
      messages: (await import(`../../messages/${context.locale}.json`)).default
    }
  };
}
  1. Use translations in your components!
💡

Next steps:

Support for legacy Next.js versions

Next.js version 10, 11 and 12 are still supported. Note however that instead of installing next-intl, you'll have to import functionality like useTranslations from use-intl.

See the legacy example (opens in a new tab).