Docs
/Getting started
/Installation
Installation
npm install next-intl
- If you want to support multiple languages, set up internationalized routing.
- Add the provider in
_app.js
.
import {NextIntlProvider} from 'next-intl';
export default function App({Component, pageProps}) {
// If you don't use internationalized routing, you need to pass a `locale` to the provider.
return (
<NextIntlProvider messages={pageProps.messages}>
<Component {...pageProps} />
</NextIntlProvider>
);
}
- Provide messages on a page-level.
// pages/index.js
export async function getStaticProps(context) {
// I you don' use internationalized routing, define this statically.
const locale = context.locale;
return {
props: {
// You can get the messages from anywhere you like. The recommended
// pattern is to put them in JSON files separated by language.
messages: (await import(`../../messages/${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.