Docs
/
Getting started
/
Installation

Installation

  1. npm install next-intl
  2. If you want to support multiple languages, set up internationalized routing.
  3. 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>
  );
}
  1. 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
    }
  };
}
  1. Use translations in your components!
💡

Next steps: