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
- 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.
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.