Internationalization (i18n) in Next.js: A Complete Guide

Internationalization (often abbreviated as i18n) refers to the process of designing a software application so that it can be adapted to various languages and regions without any engineering changes. In the context of web applications, this means enabling content to be displayed in different languages, which is especially crucial in an increasingly globalized world.

Next.js, a popular React framework, offers robust support for internationalization out of the box. This guide will walk you through implementing i18n in your Next.js applications using its built-in features, alongside practical examples written in TypeScript.

Why Use Internationalization in Next.js?

Before we dive into the technical details, let’s explore why you might want to use i18n in your Next.js projects:

1. Global Reach: Expanding your application’s user base by providing content in multiple languages.
2. Improved UX: Catering to users in their native language can greatly enhance user experience and engagement.
3. Competitive Advantage: Offering multi-language support can set your application apart from competitors, especially in diverse markets.

Getting Started with i18n in Next.js

As of Next.js 10, internationalized routing was introduced, simplifying the process of adding multiple language support to your application.

Step 1: Install Next.js

First, ensure that you have the latest version of Next.js installed. You can create a new Next.js project using the following command:

npx create-next-app@latest my-nextjs-project

Navigate to your project directory:

cd my-nextjs-project

Step 2: Configure Next.js for i18n

To enable i18n in your Next.js application, you need to configure your next.config.js file.

Here’s an example configuration:

// next.config.js
module.exports = {
  i18n: {
    locales: ['en', 'fr', 'es'], // List of supported locales
    defaultLocale: 'en',         // Default locale
    localeDetection: true,       // Automatically redirect based on user's language preference
  },
};

In this example, we’re specifying English (en), French (fr), and Spanish (es) as supported languages, with English being the default language.

Step 3: Create Localized Content

Next, you need to create localized content for each supported language. A common practice is to use JSON files to store translations.

Create a locales directory at the root of your project, and within it, create a folder for each language. For this example, create en, fr, and es directories.

Inside each of these folders, create JSON files for your translations. Here’s an example for en/common.json:

{
  "welcome": "Welcome to our application",
  "languageSelect": "Select your language"
}

Similarly, create common.json for fr and es with translated strings.

Step 4: Accessing Translations in Your Components

To access translations in your components, you’ll use a custom hook or a library like next-i18next. For simplicity, we'll demonstrate using a custom hook.

First, create a TypeScript type for your translations:

// types/Translations.d.ts
export type Translations = {
  welcome: string;
  languageSelect: string;
};

Then, create a hook to fetch the translations:

// hooks/useTranslation.ts
import { Translations } from '../types/Translations';
import { useRouter } from 'next/router';

const translations: Record<string, Translations> = {
  en: require('../locales/en/common.json'),
  fr: require('../locales/fr/common.json'),
  es: require('../locales/es/common.json'),
};

export const useTranslation = () => {
  const { locale } = useRouter();
  return translations[locale || 'en'];
};

Step 5: Use Translations in Your Pages or Components

Finally, you can use the useTranslation hook in your components to display content based on the user's selected language.

// components/Header.tsx
import React from 'react';
import { useTranslation } from '../hooks/useTranslation';

const Header: React.FC = () => {
  const t = useTranslation();

  return (
    <header>
      <h1>{t.welcome}</h1>
      <p>{t.languageSelect}</p>
    </header>
  );
};

export default Header;

Conclusion

Internationalization in Next.js is a powerful feature that allows you to reach a broader audience by offering content in multiple languages. With the framework’s built-in support and a structured setup, you can seamlessly implement i18n in your applications.

This guide covered setting up i18n in a Next.js project, creating localized content, and accessing translations using a custom hook. Implementing internationalization not only improves user experience but also expands your application’s reach in diverse linguistic regions.

As your application grows, consider using more advanced libraries like next-i18next or react-intl for additional features and better scalability. Remember, international expansion is not just about translating words—it's about understanding cultural nuances and offering a truly localized experience.