Next.js - Internationalization

Quiz

What is Internationalization?

Internationalization is a built-in feature in Next.js that allows to built multi language websites by managing contents and routes based on user's language preference. By setting up internationalization, the Next.js application will automatically handles routing for different locales. For example, if the user support English (en) and Spanish (es), then the routes might look like /en/about and /es/about. In this chapter, we will learn features of internationalization and how to set it up in your Next.js application.

Features of Internationalization

Automatic Locale Detection: Next.js automatically detects the user's locale from browser settings, and sets the appropriate locale for the user. This means that the user can access the website in their preferred language without having to manually set the locale.
Locale-Aware Routing: Next.js automatically handles routing based on the user's locale. For example, /en/about (English version) and /es/about (Spanish version) will be handled by the same page component.
Default Locale: Next.js provides a default locale that can be set in the next.config.js file. This locale will be used as the fallback locale if the user's locale is not supported.
Multiple Supported Locales: Next.js supports a wide range of locales, such as English, Spanish, French, German, Italian, Portuguese, and more. .

Setup Internationalization

To setup internationalization, follow the steps below:

Step 1: Modify Next.js Config File

To enable internationalization, first you need to modify the next.config.js file. Open the next.config.js file and add the following code:

// next.config.js

module.exports = {
  i18n: {
    locales: ['en', 'es', 'fr'], // Supported languages
    defaultLocale: 'en',         // Default language
  },
};

Step 2: Routing and Linking

Now, you can use Next.jss <Link> component to navigate between pages. Specify locale as attribute of <Link> component. See the code below.

import Link from 'next/link';

export default function HomePage() {
  return (
    <div>
      <h1>Welcome</h1>
      <Link href="/about" locale="es">
        Go to About in Spanish
      </Link>
    </div>
  );
}

Step 3: Setup Translation Strategies

The Next.js doesn't include a translation system, but you can use external translation libraries to translate your content. These libraries integrate with Next.js to load translation files and help manage translation keys in your components. For example,

Locale Strategies

Next.js provides two strategies for handling locales in your application, Sub-path Routing and Domain Routing.

Sub-path Routing

In sub-path routing, the locale information will be added in the URL path. For example, if the user is accessing the website in English, the URL will look like https://example.com/en/about.

// File: /next.config.js

module.exports = {
  i18n: {
    locales: ['en-US', 'fr', 'nl-NL'],
    defaultLocale: 'en-US',
  },
}

With the above configuration en-US, fr, and nl-NL will be available to be routed to, and en-US is the default locale. If you have a pages/blog.js the following urls would be available:

/blog
/fr/blog
/nl-nL/blog

Domain Routing

In domain routing, the locale information will be added in the domain name. For example, if the user is accessing the website in English, the URL will look like https://example.en/about.

// File: /next.config.js

module.exports = {
  i18n: {
    locales: ['en-US', 'fr', 'nl-NL', 'nl-BE'],
    defaultLocale: 'en-US',
 
    domains: [
      {
        domain: 'example.com',
        defaultLocale: 'en-US',
      },
      {
        domain: 'example.fr',
        defaultLocale: 'fr',
      },
      {
        domain: 'example.nl',
        defaultLocale: 'nl-NL',
        locales: ['nl-BE'],
      },
    ],
  },
}

With the above configuration en-US, fr, nl-NL, and nl-BE will be available to be routed to, and en-US is the default locale. If you have a pages/blog.js the following urls would be available:

example.com/blog
www.example.com/blog
example.fr/blog
example.nl/blog
example.nl/nl-BE/blog

Automatic Locale Detection

When a user visits the application for the first time, Next.js will automatically detect the user's locale based on the browser settings. If a locale other than the default locale is detected, the user will be redirected to either:

The locale prefixed path when using sub-path routing, or
The domain with that locale specified when using domain routing.

Disable Automatic Locale Detection

To disable automatic locale detection, set the localeDetection option to false in the next.config.js file.

// File: /next.config.js

module.exports = {
  i18n: {
    localeDetection: false,
  },
}

Print Page