Next.js 13 internationalization (i18n) with the Pages Router

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

npm install next-intl
Set up internationalized routing (opens in a new tab).
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} messages={pageProps.messages}>
      <Component {...pageProps} />
    </NextIntlClientProvider>
  );
}

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

Use translations in your components!

💡

Next steps:

Exploring next-intl? Check out the usage guide.
Decided you're sticking with next-intl? Consider the steps of the checklist for production.
Ran into an issue? Have a look at the Pages Router example to explore a working app.

App Router (Server Components)Start