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.
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}
timeZone="Europe/Vienna"
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. Ran into an issue? Have a look at the Pages Router example to explore a working app.
Are you transitioning from the Pages to the App Router? Check out the migration example.