Next.js i18n (日本語)

Next.js は、React ベースのフレームワークで多言語対応(i18n)を簡単に実装できます。このガイドでは、フォルダ構造、翻訳ファイルの作成場所、サンプルデータの活用方法について見ていきます。

基本的な翻訳には問題ありませんし、必要な場面での使用をお勧めしますが、私たちが想像する多言語サイトを作成するためには、多少の制約があると感じられるかもしれません。

(正確に言うと、制約はありません。ただし、かなりの手間がかかります。)

使用方法

  1. next-i18nextを使用して i18n 設定ファイルを作成します。(next-i18next.config.js

  2. 必要な言語ファイルを作成し、対応する言語のコンテンツを記述します。

  3. ページやコンポーネントでuseTranslationフックを使用して多言語コンテンツを取得し、使用します。


Installation

i18n は「国際化」を意味する略語で、アプリケーションを複数の言語に対応させる技術を指します。Next.js の i18n 機能は、アプリケーション内で効率的に多言語コンテンツを管理し表示できるようサポートします。

  1. Next.jsプロジェクトを作成するか、既存のプロジェクトに移動します。

  2. ターミナルで次のコマンドを実行して、next-i18nextパッケージをインストールします。

next.js i18n

npm install next-i18next

フォルダ構造

Next.js の i18n を実装する際に、フォルダ構造を適切に整理することが重要です。一般的には以下のような構造が使われます。

  1. pagesベースの場合、src/locales/en || src/locales/jp などの構造がお勧めです。

  2. Next.js 13アプリディレクトリを使用する場合、public/locales/en || public/locales/jp などの構造がお勧めです。

next.js i18n フォルダ構造

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

翻訳ファイルの作成

locales/フォルダの中に、各言語ごとのフォルダを作成し、そのフォルダ内に多言語の翻訳ファイルを作成します。

  1. 各言語ごとのデータを直接翻訳する必要があります。

/en/commone.json

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

/jp/commone.json

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

翻訳ファイルの適用

コード内で t('안녕')のように t 関数を使用して翻訳されたデータを呼び出すことができます。

  1. 適用自体に問題はありませんが、単語ごとの翻訳を行う場合、想像以上に問題が発生しました。

/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;

利点

説明

  • Name
    多言語対応の簡素化
    Type
    利点
    Description

    Next.js i18nは、多言語のコンテンツを効率的に管理し表示できるため、多言語対応が容易です。

  • Name
    SEO最適化
    Type
    利点
    Description

    各言語ごとのURLとメタデータを管理して、検索エンジン最適化を強化できます。

  • Name
    国際市場展開の容易化
    Type
    利点
    Description

    様々な言語でアプリケーションを提供することで、国際市場向けの適切な製品を提供できます。

i18n

欠点

説明

  • Name
    学習カーブ
    Type
    欠点
    Description

    初めてのユーザーには、i18nのコンセプトと設定に関する学習カーブがあるかもしれません。

  • Name
    翻訳の問題
    Type
    欠点
    Description

    単語ごとの翻訳を行う場合、想像以上に誤訳が多く発生します。正確なデータ提供のためには文章の管理が必要ですが、文章そのものを翻訳するため、予想以上に時間がかかりました。

i18n2