Internationalization (i18n)

Next.js Internationalization (i18n) is a feature that enables developers to implement multiple language support in their applications easily. It is an essential aspect of broadening the user base by providing content in different languages, taking into account cultural variations, regional differences, and localization requirements. This chapter aims to provide detailed explanations and practical examples to use Next.js i18n effectively. For illustration, we will be considering a hypothetical movie website where users can read movie reviews and get insights about their favorite stars from different parts of the globe.

To start, setting up internationalized routing in a Next.js app is straightforward. It involves adding the i18n property to your next.config.js file. For instance, if we wanted our movie web app to support English and French, our i18n property configuration would look like this:

// next.config.js
module.exports = {
  i18n: {
    locales: ['en', 'fr'],
    defaultLocale: 'en',
  },
}

In the configuration above, locales array defines all the supported languages in our application, and defaultLocale property sets English as our main language. But how does this translate to our application?

Next.js will now automatically handle routing based on these settings. For instance, the review for a movie named "Castle" will be accessed via /en/castle for English and /fr/castle for French. It uses the path prefix for routing. However, the default locale (English in this case) will not have a path prefix.

Next.js also automatically provides language detection based on the user's Accept-Language header and redirects them to their preferred locale if any.

But how about the actual content in different languages? This is where localization libraries such as i18next or react-intl come handy. While Next.js handles the routing, these libraries manage the actual content of your app.

Let's continue with our movie web app as an example. Suppose we want to show a welcome message to visitors in their preferred language. In English, it would be "Welcome to MovieStar!" and in French "Bienvenue à MovieStar!". We can achieve this using i18next.

Firstly, we'll need to install i18next and react-i18next:

npm install i18next react-i18next 

Once installed, next is to create a file to configure i18next. We'll call it i18n.js:

// i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n.use(initReactI18next).init({
  resources: {
    en: {
      translations: {
        welcome: 'Welcome to MovieStar!',
      },
    },
    fr: {
      translations: {
        welcome: 'Bienvenue à MovieStar!',
      },
    },
  },
  fallbackLng: 'en',
  debug: true,

  ns: ['translations'],
  defaultNS: 'translations',

  keySeparator: false,

  interpolation: {
    escapeValue: false,
    formatSeparator: ',',
  },

  react: {
    wait: true,
  },
});

export default i18n;

In the configuration above, the resources object contains the actual texts we want to translate for each of our locales ('en' and 'fr'), fallbackLng is the default language should the user's language not be supported.

To use this welcome message, firstly import the i18n config file in _app.js:

// pages/_app.js
import '../i18n';

And then in any of your components, you can access the translations:

// in any component
import { useTranslation } from 'react-i18next';
...
const { t } = useTranslation();
return (
  <div>
    <h1>{t('welcome')}</h1>
  </div>
)

Once you change the locale path in the URL from 'en' to 'fr', you should see the welcome message change from English to French.

Apart from handling the content of your application, there is also server side rendering in Next.js which allows you to fetch and set your locale content before the page is sent to the user's browser. This could be particularly useful in a larger scale application.

Navigating between locales is also straightforward. Next.js provides a built-in Link component which you can utilize. Here's a code snippet demonstrating how:

import Link from 'next/link';
...
<Link href="/fr/castle" locale='fr'>Check out Castle in French</Link>
<Link href="/en/castle" locale='en'>Check out Castle in English</Link>

Just like that, with Next.js you have both the power and the flexibility to easily provide your users with content in their preferred language, enhancing user experience and possibly reaching a broader audience. This is just the beginning. With different plugins available, you could even extend your app to handle plurals, context, trans components and so much more!