Next-intl library integration in NextJS

Introduction

Next-intl helps you show your website in different languages easily. It makes your app friendly for people who speak different languages.

You want your Next.js website to support English and Spanish.

You need to show dates and numbers in the visitor's local format.

You want to switch languages without reloading the page.

You want to keep all your text translations in one place.

You want to make your app accessible to more users worldwide.

Syntax

NextJS

import {NextIntlProvider} from 'next-intl';

export default function App({Component, pageProps}) {
  return (
    <NextIntlProvider messages={pageProps.messages}>
      <Component {...pageProps} />
    </NextIntlProvider>
  );
}

Wrap your app with NextIntlProvider to provide translations.

Pass the messages prop containing translations for the current language.

Examples

Use useTranslations hook to get translated text inside components.

NextJS

import {useTranslations} from 'next-intl';

export default function Greeting() {
  const t = useTranslations('Greeting');
  return <p>{t('hello')}</p>;
}

Load translation messages based on the current locale in getStaticProps.

NextJS

export async function getStaticProps({locale}) {
  return {
    props: {
      messages: (await import(`../messages/${locale}.json`)).default
    }
  };
}

Sample Program

This example shows a Next.js app using next-intl. The App component wraps everything with NextIntlProvider. The Greeting component uses translations from the Greeting namespace. The getStaticProps function loads the right language messages based on the locale.

NextJS

import {NextIntlProvider, useTranslations} from 'next-intl';

export default function App({Component, pageProps}) {
  return (
    <NextIntlProvider messages={pageProps.messages}>
      <Component {...pageProps} />
    </NextIntlProvider>
  );
}

export function Greeting() {
  const t = useTranslations('Greeting');
  return <h1>{t('hello')}</h1>;
}

export async function getStaticProps({locale}) {
  return {
    props: {
      messages: (await import(`../messages/${locale}.json`)).default
    }
  };
}

Important Notes

Keep your translation files organized by language and namespace for easy management.

Use the useTranslations hook inside components to get translated strings.

Remember to handle fallback languages if a translation is missing.

Summary

Next-intl helps you add multiple languages to your Next.js app.

Wrap your app with NextIntlProvider and load messages per locale.

Use useTranslations hook to get translated text inside components.