STSS↗︎-72.2986%
MIST↗︎-60.8889%
WOLF↗︎-52.0446%
LGMK↗︎-50.1961%
XTIA↗︎-50.0%
ICON↗︎-48.0%
LKCO↗︎-46.3576%
DRCT↗︎-45.1278%
SBEV↗︎-45.0%
CCGWW↗︎-42.9769%
MSSAR↗︎-41.9795%
COOTW↗︎-40.8571%
COEPW↗︎-39.3939%
RCT↗︎-38.2051%
CYCUW↗︎-37.5%
AGMH↗︎-36.6091%
MOBBW↗︎-33.8636%
ECX↗︎-33.6283%
TDTH↗︎-33.5412%
FGIWW↗︎-33.3778%
STSS↘︎-72.2986%
MIST↘︎-60.8889%
WOLF↘︎-52.0446%
LGMK↘︎-50.1961%
XTIA↘︎-50.0%
ICON↘︎-48.0%
LKCO↘︎-46.3576%
DRCT↘︎-45.1278%
SBEV↘︎-45.0%
CCGWW↘︎-42.9769%
MSSAR↘︎-41.9795%
COOTW↘︎-40.8571%
COEPW↘︎-39.3939%
RCT↘︎-38.2051%
CYCUW↘︎-37.5%
AGMH↘︎-36.6091%
MOBBW↘︎-33.8636%
ECX↘︎-33.6283%
TDTH↘︎-33.5412%
FGIWW↘︎-33.3778%

Homepage
Programming
Creating a Multi-Language Next.js Application with i18n

Creating a Multi-Language Next.js Application with i18n

This article explores how to build a multi-language application using Next.js and its built-in i18n support. It covers the essential steps for setting up internationalization, including configuring language options, managing translations, and using locale-specific routing. Learn how to provide a seamless user experience for speakers of different languages in your web applications.

Published: March 3, 2025 at 5:52 PM UTC

Introduction
Building multi-language applications is essential in today’s globalized web environment, where users come from diverse linguistic backgrounds. This article explores how to leverage Next.js, a popular React framework, to create a multi-language application with built-in internationalization (i18n) support.
Understanding Next.js i18n Support
Next.js offers a straightforward way to incorporate internationalization through its configuration settings. The framework allows developers to define supported languages and a default language, enabling users to navigate the application seamlessly, regardless of their preferred language.
Setting Up Internationalization in Next.js
To begin, you'll need to configure your Next.js application to support multiple languages. This involves modifying the 'next.config.js' file. You'll specify the available languages and the default language. Below are the steps for setup:
```
// next.config.js
const nextConfig = {
  i18n: {
    locales: ['en', 'es', 'fr'], // List of supported languages
    defaultLocale: 'en', // Default language
  },
}

module.exports = nextConfig;
```

Managing Translations

After configuring i18n, you'll need to manage translations for various components of your application. A common approach is to create separate JSON files for each language, which contain key-value pairs representing translatable strings. This separation allows for easier management of translations.

// locales/en.json
{
  "welcome": "Welcome",
  "description": "This is a multi-language application."
}

// locales/es.json
{
  "welcome": "Bienvenido",
  "description": "Esta es una aplicación multilingüe."
} 

// locales/fr.json
{
  "welcome": "Bienvenue",
  "description": "Ceci est une application multilingue."
}

Using Translations in Components

Once you have your translations set up, you can utilize them in your React components. To achieve this, you'll create a custom hook that retrieves the appropriate translation based on the current locale.

import { useRouter } from 'next/router';
import en from '../locales/en.json';
import es from '../locales/es.json';
import fr from '../locales/fr.json';

const translations = { en, es, fr };

function useTranslation() {
  const { locale } = useRouter();
  return translations[locale];
} 

export default useTranslation;

Implementing Locale-Specific Routing
Next.js automatically adds locale-specific routing based on the configuration in the 'next.config.js' file. This means that for each language, a different route will be generated. For example, '/about' could become '/es/about' for Spanish users, enhancing user experience through localized URLs.
Conclusion
By following these steps, you can build a robust multi-language application using Next.js and its i18n support. This framework simplifies the process of internationalization, allowing developers to focus more on user experience and less on the complexities of managing different languages in web applications.