What is Internationalization (i18n)?

Internationalization (often abbreviated to i18n because there are 18 letters between 'i' and 'n') is the process of designing and preparing your application so it can be adapted to various languages and regions without engineering changes. This involves more than just translating text; it can include formatting dates, times, and numbers correctly for different locales.

Next.js Built-in i18n Routing

Next.js has first-class support for i18n routing, which handles the most complex part of the process: mapping URLs to different languages. You configure this in your next.config.js file.

• Locales: A list of the languages you support.
• Default Locale: The language to use if no specific locale is detected.
• Routing Strategy:
• Sub-path Routing: Puts the locale in the URL path (e.g., example.com/fr/about). This is the most common and SEO-friendly approach.
• Domain Routing: Uses different domains for each locale (e.g., example.fr/about).

Configuration Example (next.config.js):

JavaScript

/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    // These are all the locales you want to support in
    // your application
    locales: ['en-US', 'fr', 'nl-NL'],
    // This is the default locale you want to be used when visiting
    // a non-locale prefixed path e.g. `/hello`
    defaultLocale: 'en-US',
  },
};

module.exports = nextConfig;

With this config, Next.js will automatically handle routing:

• A request to /fr/about will render the about page with the fr locale.
• A request to /about will render the about page with the en-US locale.

Managing Translation Content

Next.js handles the routing, but you are responsible for providing the translated content. A common strategy is to use JSON files for each language.

Project Structure:

/
├── locales/
│   ├── en-US.json
│   ├── fr.json
│   └── nl-NL.json
├── app/
│   └── [locale]/
│       └── page.js
└── next.config.js

locales/en-US.json

JSON

{
  "HomePage": {
    "title": "Welcome to our Website!",
    "description": "This is an example of i18n in Next.js."
  }
}

locales/fr.json

JSON

{
  "HomePage": {
    "title": "Bienvenue sur notre site web!",
    "description": "Ceci est un exemple d'i18n dans Next.js."
  }
}

Using Translations in Components

While you could build your own system to load these files, a library like next-intl makes it much easier by providing hooks and providers to access translations.

Example with next-intl: After setting up the library, your page component might look like this:

JavaScript

// app/[locale]/page.js
import { useTranslations } from 'next-intl';

export default function HomePage() {
  // The hook gets the translations for the current namespace
  const t = useTranslations('HomePage');

  return (
    <div>
      <h1>{t('title')}</h1>
      <p>{t('description')}</p>
    </div>
  );
}

The next-intl library uses the locale from the URL to load the correct JSON file and provide the right translations through the useTranslations hook.