Internationalization (i18n) in Next.js: Supporting Multiple Languages

Introduction

In today’s globalized world, creating applications that cater to a multilingual audience is increasingly important. Internationalization (i18n) enables developers to build websites and apps that can adapt to different languages and regions. With Next.js, implementing i18n is straightforward, thanks to its built-in support and extensive configuration options. In this guide, we’ll walk through the steps of setting up internationalization in a Next.js project and discuss best practices for delivering a seamless multilingual experience.

---

Main Content

1. What is Internationalization (i18n)?

Internationalization (i18n) is the process of designing a product or application to support multiple languages and regions without requiring engineering changes. This often includes:

• Translating text into different languages.

• Formatting dates, numbers, and currencies according to local conventions.

• Adapting layouts for right-to-left (RTL) languages.

2. Why Use i18n in Next.js?

Next.js provides native support for i18n, making it easier to:

• Automatically detect a user’s preferred language.

• Serve content based on locale settings.

• Improve accessibility and user experience for a global audience.

3. Setting Up i18n in Next.js

Next.js simplifies the i18n setup by allowing configuration directly in the next.config.js file.

Step 1: Create a Next.js project if you don’t already have one:

npx create-next-app i18n-nextjs-example
cd i18n-nextjs-example

Step 2: Configure i18n in next.config.js:

module.exports = {
  i18n: {
    locales: ['en', 'fr', 'es'], // Supported languages
    defaultLocale: 'en',        // Default language
  },
};

• locales: Specifies the languages your app will support.

• defaultLocale: The default language for users.

Step 3: Restart your development server:

npm run dev

4. Structuring Translations

Organizing your translations is crucial for maintaining a scalable project.

Folder Structure Example:

/public
  /locales
    /en
      common.json
    /fr
      common.json
    /es
      common.json

Sample common.json for English:

{
  "welcome": "Welcome",
  "description": "This is a multilingual Next.js application."
}

5. Implementing Translations in Components

Use the next-translate library for seamless integration of translations into your components.

Step 1: Install the library:

npm install next-translate

Step 2: Access translations in a component:

import useTranslation from 'next-translate/useTranslation';

function HomePage() {
  const { t } = useTranslation('common');

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
    </div>
  );
}

export default HomePage;

• useTranslation: A hook to fetch translations from the specified namespace.

• t: A function to retrieve the translated text using keys.

6. Routing with Locales

Next.js automatically supports locale-based routing. For example:

• / serves the default language (en).

• /fr serves the French version.

• /es serves the Spanish version.

7. Server-Side Rendering with i18n

You can fetch translations server-side using getServerSideProps or getStaticProps.

Example with getStaticProps:

import useTranslation from 'next-translate/useTranslation';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

export async function getStaticProps({ locale }) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ['common'])),
    },
  };
}

function HomePage() {
  const { t } = useTranslation('common');

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
    </div>
  );
}

export default HomePage;

• serverSideTranslations: Preloads translations server-side for better performance.

• locale: Automatically passed by Next.js to indicate the user’s language preference.

---

Examples/Case Studies

1. E-commerce Website: An online store serving customers in multiple regions can use i18n to show localized content, such as product descriptions and prices.

2. Blog Platform: A blog site can use i18n to offer posts in different languages, improving global reach and reader engagement.

---

Tips/Best Practices

1. Use Namespaces: Organize translations into namespaces (e.g., common, home, about) for better management.

2. Right-to-Left (RTL) Support: Add CSS styles and layout adjustments for languages like Arabic or Hebrew.

3. Language Switcher: Include a dropdown or toggle for users to switch languages easily.

4. Fallback Languages: Provide fallback translations if a specific language is unavailable.

5. Dynamic Content: Use libraries like next-i18next to dynamically load translations for server-rendered pages.

---

Conclusion

Internationalization in Next.js empowers developers to create inclusive and globally accessible applications. With built-in support and tools like next-translate, you can efficiently manage translations, enhance user experience, and expand your audience reach. Whether you’re building an e-commerce site, blog, or SaaS platform, i18n is a game-changer.

Transform your application into a global success story with Next.js i18n support. Start implementing today, and share your journey in the comments!