Internationalization (i18n) is a key aspect when we want our applications to be available in multiple languages and cultures. Next.js 13 facilitates internationalization using the App Router, allowing us to manage routes, content, and configurations specific to different languages.

In this chapter, we will learn how to implement i18n in a Next.js 13 application using the App Router.

Basic i18n Configuration in Next.js

To start with internationalization in Next.js, we need to configure the languages in the next.config.js file. We can define the languages that the application will support as follows:

javascript

With this setup, Next.js will generate routes like /es/about or /fr/contact for each page.

Defining Multilingual Routes

After configuring the languages in next.config.js, we can define multilingual pages using the App Router. The route structure will be automatically handled according to the selected language.

Here is an example of how to create an "about" page in different languages:

javascript

The locale parameter is captured directly from the URL, allowing the page content to be customized according to the user's language.

Changing Language Dynamically

Next.js also allows dynamic language switching within the same application. We can create a language selector for the user to choose their preferred language.

javascript

The LanguageSwitcher component detects the current language of the page and allows switching between the available languages.

Loading Localized Content

To handle more complex content, we can store translation files in dedicated folders for each language. Below is an example of how to structure translations in JSON files:

json

json

Then, we can load these translation files according to the selected language:

javascript

This modular approach allows us to keep translations separate and organized by language.

Using Libraries for i18n

In addition to Next.js's native capabilities, we can also use specialized libraries like react-i18next to handle translation in more complex applications. This library allows advanced language management and is compatible with Next.js.

Installing react-i18next

To install and configure react-i18next, follow these steps:

bash

Once installed, set up the i18n provider:

javascript

The react-i18next library offers support for translation keys, variable interpolation, and more advanced language management options.

Conclusion

Internationalization in Next.js 13 is very easy to implement and offers various ways to manage content in different languages. We can leverage both the framework's native capabilities and external tools to handle translations and customize the user experience based on their location or language.