18 Translation in Next.js

Implementing multilingual support is an essential part of developing globally oriented web applications. Next.js offers flexible options to manage and present multilingual content and translations.

18.1 International routes (i18n routing)

As of version 10, Next.js supports native international routes (i18n routing). This functionality makes it possible to provide different language versions of the same page under different paths, e.g. /en/about and /de/about for English and German versions of an “About us” page respectively.

18.1.1 Configuration

The i18n support is configured in the next.config.js file. Here you can define the supported languages and the default locale:

module.exports = {
  i18n: {
    locales: ['en', 'de', 'fr'],
    defaultLocale: 'en',
  },
};

18.2 Localization libraries

For the actual translation of the content, it is advisable to use proven localization libraries. Popular options are:

  1. react-i18next: A React integration of the i18next library, which offers extensive translation functions and localization support.

  2. next-i18next: Builds on react-i18next and provides additional integrations specifically for Next.js, such as server-side rendering and route localization.

18.2.1 Example with react-i18next:

import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t } = useTranslation();

  return <p>{t('key_for_translation')}</p>;
}

18.3 Dynamic loading of translations

Translation resources can be loaded dynamically to reduce the application size and optimize loading times. Libraries such as react-i18next support loading translation files via network request or by importing JSON files.

18.4 Localization of date and time formats

The localization of date and time information can be achieved by using libraries such as date-fns or moment. These libraries provide functions for formatting dates in different languages and cultures.

18.5 SEO for multilingual pages

It is important to consider SEO aspects for multilingual pages. This includes setting hreflang tags for different language versions and ensuring that search engines index the different language versions correctly.

18.6 Exercise: Multilingual Next.js application

18.6.1 Aim of the task

Create a simple multilingual Next.js application that includes the following:

  1. Page structure: Two pages - a home page (index.js) and an “About Us” page (about.js).

  2. Multilingual support: English and German.

  3. Language switching: An option to switch between English and German.

4 Content localization: Use next-i18next to translate text content on both pages.

  1. SEO optimization: Implement hreflang tags for both languages.

18.6.2 Task creation

18.6.2.1 1. Set up the Next.js project

Create a new Next.js project with create-next-app.

18.6.2.2 2. Install next-i18next

Install next-i18next for the translation functionality.

18.6.2.3 3. Configuration

Configure next-i18next and i18n support in next.config.js.

18.6.2.4 4. Localization files

Create localization files for English and German.

18.6.2.5 5. Implementation

Implement the two pages and integrate the localization.

18.6.2.6 6. Language switching

Add a function to switch the language.

18.6.2.7 7. SEO optimization

Implement hreflang tags for both languages.