Installation
npm install next-intl
- Set up internationalized routing (opens in a new tab).
- Add the provider in
_app.js
.
_app.js
import {NextIntlProvider} from 'next-intl';
export default function App({Component, pageProps}) {
return (
<NextIntlProvider messages={pageProps.messages}>
<Component {...pageProps} />
</NextIntlProvider>
);
}
- Provide messages on a page-level.
pages/index.js
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 (e.g. `en.json`).
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 minimal setup example to explore a working app.