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.

Start