Next.js i18n (English)

Next.js is a React-based framework that enables easy implementation of multilingual support (i18n). In this guide, we will explore the folder structure, the location for creating translation files, and how to utilize sample data.

There are no issues with basic translations and we recommend using it where necessary, but you may feel some limitations when trying to create a multilingual site as you imagine.

(To be precise, there are no limitations, but it does require quite a bit of effort.)

Usage

  1. Create an i18n configuration file using next-i18next (such as next-i18next.config.js).

  2. Create necessary language files and write content for each corresponding language.

  3. Use the useTranslation hook in pages or components to retrieve and utilize multilingual content.


Installation

i18n stands for "internationalization," which refers to the technology of making applications support multiple languages. Next.js's i18n feature helps efficiently manage and display multilingual content within your application.

  1. Create a Next.js project or navigate to an existing project.

  2. In the terminal, execute the following command to install the next-i18next package.

next.js i18n

npm install next-i18next

Folder Structure

When implementing Next.js i18n, organizing the folder structure properly is important. Generally, the following structure is used.

  1. For pages-based setup, a structure like src/locales/en || src/locales/jp is recommended.

  2. When using Next.js 13 app directory, a structure like public/locales/en || public/locales/jp is recommended.

next.js i18n Folder Structure

- public/
- src/
    - components/
    - pages/
    - locales/
        - en/
            - common.json
        - ja/
            - common.json
- next-i18next.config.js

Creating Translation Files

Create a folder for each language inside the locales/ directory and create multilingual translation files within those folders.

  1. You need to directly translate the data for each language.

/en/commone.json

{
    "안녕": "Hello",
    "세계": "World"
}

/jp/commone.json

{
    "안녕": "こんにちは",
    "세계": "世界"
}

Applying Translation Files

In your code, you can use the t function to call the translated data, such as t('안녕').

  1. There's no issue with the application itself, but when translating word by word, more problems occurred than anticipated.

/pages/index.js

import { useTranslation } from 'next-i18next';

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

    return (
        <div>
        <h1>{t('안녕')}</h1>
        <p>{t('세게')}</p>
        </div>
    );
}
export default HomePage;

Advantages

Description

  • Name
    Simplified Multilingual Support
    Type
    Advantages
    Description

    Next.js i18n efficiently manages and displays multilingual content, making multilingual support easy.

  • Name
    SEO Optimization
    Type
    Advantages
    Description

    Manage URLs and metadata for each language to enhance search engine optimization.

  • Name
    Ease of International Market Expansion
    Type
    Advantages
    Description

    Providing applications in various languages enables offering products suitable for international markets.

i18n

Disadvantages

Description

  • Name
    Learning Curve
    Type
    Disadvantages
    Description

    First-time users might encounter a learning curve regarding the concepts and configurations of i18n.

  • Name
    Translation Issues
    Type
    Disadvantages
    Description

    When translating word by word, more mistranslations occur than anticipated. Accurate data provision requires text management, but translating entire sentences took more time than expected.

i18n2