Getting started


  1. npm install next-intl
  2. Set up internationalized routing (opens in a new tab).
  3. Add the provider in _app.js.
import {NextIntlProvider} from 'next-intl';
export default function App({Component, pageProps}) {
  return (
    <NextIntlProvider messages={pageProps.messages}>
      <Component {...pageProps} />
  1. Provide messages on a page-level.
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
  1. Use translations in your components!

Next steps: