MENU
  1. ホーム
  2. React
  3. Next.jsでi18nを簡単設定！国際化対応の完全ガイド

Next.jsでi18nを簡単設定！国際化対応の完全ガイド

React

Next.jsを利用したWebアプリケーション開発では、i18n（国際化）対応がますます重要になっています。特に、異なる言語圏のユーザーに最適な体験を提供するためには、簡単で効率的なi18n設定が不可欠です。幸いなことに、Next.jsはi18n機能を標準でサポートしており、これを活用することで多言語対応のアプリケーションを迅速に構築できます。本記事では、Next.jsを用いたi18n対応の基本的な設定方法をわかりやすく解説します。初心者から経験者まで、誰でも実践できる内容を目指しています。

目次

i18nの概要とNext.jsでの対応方法


i18nとは、”internationalization”（国際化）の略称で、ソフトウェアやアプリケーションを複数の言語や文化に対応させるプロセスを指します。これにより、異なる言語や地域のユーザーにとって使いやすいインターフェースを提供できます。

i18nの基本概念


i18nは、テキストやフォーマット（例：日付、通貨、数字）を動的に切り替える機能を含みます。これにより、ユーザーの母国語や文化に適した形でアプリケーションが表示されます。国際化の成功には、以下の要素が必要です：

  • 翻訳可能なテキストを分離
  • 翻訳ファイルの利用
  • 地域に応じた設定の適用

Next.jsにおけるi18nの特徴


Next.jsはバージョン10以降、i18n対応をネイティブにサポートしています。この機能により、手間をかけずに以下のことが可能です：

  • URLに基づく言語設定（例：/en/、/ja/）
  • サーバーサイドとクライアントサイドでの言語切り替え
  • 複数言語での静的サイト生成（SSG）

Next.jsのi18n対応を使うことで、手作業の設定を最小限に抑えつつ、強力な国際化対応を実現できます。次節では、具体的な設定手順に必要なツールとライブラリについて説明します。

必要なライブラリとツールのインストール


Next.jsでi18n対応を設定するには、適切なライブラリやツールを導入することが重要です。これらのツールは、翻訳の管理や言語切り替えの実装を効率化します。

必要なライブラリ


以下のライブラリをインストールします：

  • next-i18next: Next.jsでi18n対応を簡単に実現するための主要なライブラリです。
  • i18next: 多言語対応のための汎用ライブラリで、翻訳管理の基盤を提供します。
  • react-i18next: Reactコンポーネントでi18nを扱いやすくする拡張ライブラリです。

インストール手順


ターミナルで以下のコマンドを実行してライブラリをインストールします：

npm install next-i18next react-i18next i18next

推奨されるツール

  • 翻訳ファイルエディタ: JSONファイルを編集するためのエディタ（例：VS CodeやSublime Text）。
  • ローカリゼーションプラットフォーム（オプション）: CrowdinやLokaliseなど、翻訳管理をクラウド上で行うツールも便利です。

セットアップ後の準備


インストールが完了したら、次にプロジェクトのディレクトリ構造を整備します。具体的には、翻訳ファイルを保存するための/localesフォルダを作成し、各言語ごとにフォルダを用意します。

これでi18n対応に必要なライブラリとツールの準備が整いました。次節では、Next.jsでの基本的な設定方法について詳しく説明します。

Next.jsでのi18n設定の基本ステップ


Next.jsでi18nを設定するためには、プロジェクト構成の調整と設定ファイルの追加が必要です。このセクションでは、基本的な手順をわかりやすく解説します。

1. `next.config.js`ファイルでのi18n設定


Next.jsの設定ファイルであるnext.config.jsに、i18nの構成を追加します。この設定により、Next.jsがどの言語をサポートするかを認識します。

module.exports = {
  i18n: {
    locales: ['en', 'ja'], // サポートする言語
    defaultLocale: 'en',  // デフォルト言語
  },
};

2. 翻訳ファイルの構成


翻訳ファイルは/public/localesディレクトリに保存します。言語ごとにフォルダを作成し、JSONファイルに翻訳テキストを定義します。例：

/public/locales/en/common.json
/public/locales/ja/common.json

common.jsonファイルの内容例：

{
  "welcome": "Welcome to our website!",
  "contact": "Contact us"
}

3. `next-i18next`の初期設定


プロジェクトのルートディレクトリにi18n.jsファイルを作成し、next-i18nextの設定を記述します：

import NextI18Next from 'next-i18next';

const NextI18NextInstance = new NextI18Next({
  defaultLanguage: 'en',
  otherLanguages: ['ja'],
  localePath: typeof window === 'undefined' 
    ? 'public/locales' 
    : 'locales',
});

export default NextI18NextInstance;
export const { appWithTranslation, withTranslation } = NextI18NextInstance;

4. アプリケーションにi18nを適用


_app.jsでappWithTranslationを使用して、アプリケーション全体にi18nを適用します：

import { appWithTranslation } from '../i18n';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default appWithTranslation(MyApp);

5. 翻訳テキストの利用


ReactコンポーネントでuseTranslationを用いて翻訳テキストを取得します：

import { useTranslation } from 'react-i18next';

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

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

export default Home;

これで、Next.jsプロジェクトにi18nの基本設定が適用されました。次節では、翻訳ファイルの作成と管理方法について詳しく説明します。

翻訳ファイルの作成と管理方法


Next.jsでi18n対応を効果的に行うには、翻訳ファイルを適切に作成し、管理することが重要です。このセクションでは、翻訳ファイルの構造と管理方法について詳しく説明します。

翻訳ファイルのディレクトリ構造


翻訳ファイルは、プロジェクトの/public/localesディレクトリに格納します。以下はディレクトリ構造の例です：

/public/locales/
  ├── en/
  │   └── common.json
  ├── ja/
  │   └── common.json

各言語フォルダには、JSON形式の翻訳ファイルを用意します。

翻訳ファイルの作成


翻訳ファイルでは、キーと値のペアでテキストを管理します。例として、common.jsonの内容を以下に示します：

英語（en/common.json）：

{
  "welcome": "Welcome to our website!",
  "contact": "Contact us",
  "about": "Learn more about us"
}

日本語（ja/common.json）：

{
  "welcome": "私たちのウェブサイトへようこそ！",
  "contact": "お問い合わせ",
  "about": "私たちについて詳しく知る"
}

モジュール化による管理の効率化


翻訳ファイルを機能ごとに分割して管理すると、効率的です。例えば：

/public/locales/
  ├── en/
  │   ├── common.json
  │   ├── homepage.json
  │   └── dashboard.json
  ├── ja/
  │   ├── common.json
  │   ├── homepage.json
  │   └── dashboard.json

こうすることで、特定のページや機能に関連する翻訳のみを簡単に管理できます。

翻訳ファイルのバージョン管理


翻訳ファイルをGitリポジトリで管理することで、変更履歴を追跡できます。以下の方法を推奨します：

  1. 翻訳ファイルの命名規則を統一する：一貫性を保つために命名規則を明確にします。
  2. コードレビューを通じた確認：翻訳の追加や修正時に、内容をレビューするプロセスを導入します。

翻訳作業の外部委託


翻訳作業を効率化するために、CrowdinやLokaliseなどのローカリゼーションツールを活用すると便利です。これらのツールは：

  • 翻訳のクラウドベース管理
  • 翻訳者とのコラボレーション
  • 翻訳メモリの活用

翻訳ファイルの読み込みと管理


プロジェクト内では、ページやコンポーネントごとに必要な翻訳ファイルを読み込むことで、効率的にi18nを実現します。

翻訳ファイルを適切に管理することで、i18n対応をスムーズに進められます。次節では、実際のコンポーネントやページでのi18nの実装例を解説します。

ページやコンポーネントでのi18nの実装例


Next.jsでi18nを実装する際、Reactコンポーネントやページ内で翻訳テキストを効率的に使用することが重要です。このセクションでは、i18nを使った実装例を紹介します。

基本的なコンポーネントでのi18n実装


ReactのuseTranslationフックを使用して、コンポーネント内で翻訳テキストを呼び出す方法を説明します。

コード例：components/Header.js

import { useTranslation } from 'react-i18next';

function Header() {
  const { t } = useTranslation('common'); // 'common'は翻訳ファイルの名前

  return (
    <header>
      <h1>{t('welcome')}</h1> {/* 翻訳キーを使用 */}
      <nav>
        <ul>
          <li>{t('about')}</li>
          <li>{t('contact')}</li>
        </ul>
      </nav>
    </header>
  );
}

export default Header;

上記の例では、common.jsonの翻訳キーを使用して、動的にテキストを表示しています。

ページでのi18n実装例


Next.jsのページファイルでi18nを利用する例を示します。ページで動的に翻訳ファイルを読み込むことが可能です。

コード例：pages/index.js

import { useTranslation } from 'react-i18next';

function HomePage() {
  const { t } = useTranslation('homepage'); // 'homepage'は翻訳ファイルの名前

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

export default HomePage;

翻訳ファイル例：locales/en/homepage.json

{
  "title": "Welcome to the Homepage",
  "description": "This is the best place to start exploring our site."
}

翻訳ファイル例：locales/ja/homepage.json

{
  "title": "ホームページへようこそ",
  "description": "ここは私たちのサイトを探索するための最良の出発点です。"
}

動的コンポーネントでのi18n


コンポーネントのプロパティに翻訳キーを渡し、再利用性を高める方法を示します。

コード例：components/Button.js

import { useTranslation } from 'react-i18next';

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

  return <button>{t(translationKey)}</button>;
}

export default Button;

使用例：

<Button translationKey="contact" />
<Button translationKey="about" />

i18nのテストとデバッグ


実装後は、各言語でテキストが正しく表示されることを確認します。ブラウザの開発者ツールやコンソールログを活用して、翻訳キーの適用漏れをチェックすることが重要です。

ページやコンポーネントでi18nを活用することで、多言語対応のアプリケーションが簡単に構築できます。次節では、ユーザーが言語を切り替える機能を実装する方法を解説します。

言語切り替え機能の実装


Next.jsでi18nを使用する際、ユーザーがアプリケーション内で簡単に言語を切り替えられる機能を提供することは重要です。このセクションでは、言語切り替えの実装方法を解説します。

1. 言語切り替えコンポーネントの作成


言語切り替え用のコンポーネントを作成し、useRouterを利用して言語を変更します。

コード例：components/LanguageSwitcher.js

import { useRouter } from 'next/router';

function LanguageSwitcher() {
  const router = useRouter();
  const { locales, locale, asPath } = router; // 現在の言語とサポート言語を取得

  const changeLanguage = (newLocale) => {
    router.push(asPath, asPath, { locale: newLocale }); // URLを更新して言語を変更
  };

  return (
    <div>
      {locales.map((lang) => (
        <button 
          key={lang} 
          onClick={() => changeLanguage(lang)} 
          disabled={lang === locale} // 現在の言語ボタンは無効化
        >
          {lang.toUpperCase()}
        </button>
      ))}
    </div>
  );
}

export default LanguageSwitcher;

2. コンポーネントの使用


作成した言語切り替えコンポーネントをページやレイアウト内で使用します。

コード例：pages/_app.js

import LanguageSwitcher from '../components/LanguageSwitcher';

function MyApp({ Component, pageProps }) {
  return (
    <div>
      <LanguageSwitcher />
      <Component {...pageProps} />
    </div>
  );
}

export default MyApp;

3. デフォルトスタイルの追加（任意）


言語切り替えボタンの見た目を改善するためにCSSを追加します。

CSS例：styles/LanguageSwitcher.css

button {
  margin: 0 5px;
  padding: 8px 12px;
  border: none;
  background-color: #0070f3;
  color: white;
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px;
}

button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

4. 動作確認


アプリケーションを起動し、異なる言語ボタンをクリックしてページが正しい言語で表示されることを確認します。

npm run dev
  • 言語切り替えボタンをクリックするとURLが変更され、選択した言語に対応するページが表示されます（例：/en/home、/ja/home）。
  • 切り替え後、ページが正しい翻訳を表示しているか確認します。

5. Cookieを使用した言語の永続化（オプション）


言語選択を永続化するには、Cookieやローカルストレージを活用します。これにより、ユーザーがアプリケーションに戻った際に最後に選択した言語を自動的に適用できます。

言語切り替え機能を実装することで、ユーザーが直感的に言語を変更できるようになります。次節では、サーバーサイドでのi18n対応の注意点を解説します。

サーバーサイドでのi18n対応の注意点


Next.jsでは、サーバーサイドレンダリング（SSR）を活用する場合にもi18n対応が求められます。このセクションでは、SSRにおけるi18n対応の注意点と具体的な実装方法を解説します。

1. サーバーサイドでのロケールの取得


サーバーサイドでは、リクエストヘッダーやURLからユーザーのロケール情報を取得します。Next.jsでは、getServerSidePropsまたはgetStaticPropsを使用してロケール情報を処理します。

コード例：pages/index.js

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

export async function getServerSideProps({ locale }) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ['common', 'homepage'])), // 必要な翻訳ファイルをロード
    },
  };
}

function HomePage() {
  return (
    <div>
      <h1>サーバーサイドレンダリング対応</h1>
    </div>
  );
}

export default HomePage;

2. サーバーサイドでの言語切り替え


サーバーサイドでロケールを切り替える場合、以下のステップを考慮します：

  • ユーザーのリクエストヘッダー（例：Accept-Language）をチェック
  • デフォルトロケールまたは指定されたロケールを適用

例：getServerSideProps内での言語設定

export async function getServerSideProps({ req }) {
  const acceptedLanguages = req.headers['accept-language'] || 'en';
  const locale = acceptedLanguages.split(',')[0]; // 最初の言語を使用

  return {
    props: {
      locale,
    },
  };
}

3. SSRでのSEO最適化


SSRを利用すると、ページがクローラーに多言語で適切に認識されるようになります。この際、以下を考慮してください：

  • 言語別のURL構造：言語ごとに異なるパスを設定（例：/en/home、/ja/home）。
  • <html>タグのlang属性：言語に応じてlang属性を動的に設定します。

例：pages/_document.jsでのlang設定

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    const { locale } = this.props.__NEXT_DATA__;
    return (
      <Html lang={locale}>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

4. サーバーサイドでのパフォーマンス最適化


SSRでは、翻訳ファイルを効率的にロードすることが重要です。必要な言語ファイルのみを読み込むように設定することで、サーバーの負荷を軽減できます。

例：動的に翻訳をロード

export async function getServerSideProps({ locale }) {
  const translations = await serverSideTranslations(locale, ['homepage']);

  return {
    props: {
      ...translations,
    },
  };
}

5. SSRのトラブルシューティング


SSR環境でのi18n対応には、以下の点に注意してください：

  • 翻訳キーの不足：コンソールで翻訳キーの不足エラーが発生する場合、該当するJSONファイルを確認し、翻訳キーを追加します。
  • ロケールのデフォルト設定：next.config.jsでデフォルトロケールを設定しているか確認します。

サーバーサイドでのi18n対応は、グローバルユーザー向けのアプリケーションにおいて重要な要素です。次節では、よくある問題とそのトラブルシューティング方法について解説します。

よくある問題とトラブルシューティング


Next.jsでi18n対応を実装する際、特定の問題に直面することがあります。このセクションでは、よくある課題を取り上げ、その解決方法を詳しく解説します。

1. 翻訳キーが表示されない


原因: 翻訳ファイルに対応するキーが存在しない、または誤った名前で保存されている可能性があります。
解決策:

  1. 該当の翻訳ファイル（例: common.json）を開き、必要なキーが正しく定義されているか確認します。
  2. 使用しているキーが一致しているか、以下のように確認します：
    javascript const { t } = useTranslation('common'); console.log(t('missingKey')); // デバッグ用
  3. 設定に間違いがない場合、キャッシュをクリアして再起動します：
    bash npm run dev

2. 言語切り替えが機能しない


原因: router.pushが正しく機能していない、またはnext-i18nextの設定に不備がある可能性があります。
解決策:

  1. next.config.jsでi18nの設定が正しいか確認します。
    javascript module.exports = { i18n: { locales: ['en', 'ja'], defaultLocale: 'en', }, };
  2. router.pushが正しくURLを更新しているか確認します。
  3. 言語フォルダが/public/locales以下に存在し、正しいファイル構造になっていることを確認します。

3. 翻訳ファイルの変更が反映されない


原因: 開発環境でキャッシュが問題を引き起こしている可能性があります。
解決策:

  1. サーバーを再起動します：
    bash npm run dev
  2. ブラウザのキャッシュをクリアして、ページを再読み込みします。
  3. 必要に応じて、i18n.jsのキャッシュ設定を確認します。

4. 翻訳ファイルのロードが遅い


原因: 不必要な翻訳ファイルがロードされている可能性があります。
解決策:

  1. serverSideTranslationsで必要な翻訳ファイルのみを指定します：
    javascript await serverSideTranslations(locale, ['common', 'homepage']);
  2. ファイルサイズを最適化し、不要なデータを削除します。

5. SEOに関連する問題


原因: 言語ごとのURL構造や<html>タグのlang属性が適切でない場合、SEOに悪影響を及ぼします。
解決策:

  1. next.config.jsで言語ごとのURL構造を明確に設定します。
  2. pages/_document.jsで適切なlang属性を動的に設定します：
    javascript <Html lang={locale}>

6. 翻訳テキストが部分的に表示されない


原因: 翻訳キーのスコープ（名前空間）が間違っている可能性があります。
解決策:

  1. 翻訳キーが正しい名前空間に配置されているか確認します。
  2. 必要に応じて、useTranslationで正しい名前空間を指定します：
    javascript const { t } = useTranslation('homepage');

7. サーバーエラーが発生する


原因: サーバーサイドでの翻訳ファイルのロードに問題がある可能性があります。
解決策:

  1. serverSideTranslationsを使用している箇所で例外をキャッチし、エラー内容を確認します。
    javascript try { const translations = await serverSideTranslations(locale, ['common']); } catch (error) { console.error(error); }
  2. 必要なファイルが存在しているか確認します。

これらの解決策を活用することで、i18n対応のトラブルを効率的に解消し、ユーザーにとって快適な多言語体験を提供できます。次節では、i18nを活用した多言語SEO対応の応用例について解説します。

応用例：多言語SEO対応の実現


Next.jsでi18nを利用する際、多言語対応のSEOを最適化することは非常に重要です。このセクションでは、i18nを活用したSEO対応の具体例を紹介します。

1. 言語別のURL構造


多言語SEOでは、URLが各言語に応じた構造になっていることが求められます。Next.jsのi18n設定を活用すると、自動的に言語別のパスを生成できます。

例：next.config.jsでの設定

module.exports = {
  i18n: {
    locales: ['en', 'ja'],
    defaultLocale: 'en',
  },
};

上記設定により、以下のようなURLが自動生成されます：

  • 英語：https://example.com/en
  • 日本語：https://example.com/ja

2. “タグの`lang`属性


lang属性を正しく設定することで、検索エンジンがページの言語を適切に認識できます。

例：pages/_document.js

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    const { locale } = this.props.__NEXT_DATA__;
    return (
      <Html lang={locale}>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

3. `hreflang`タグの活用


検索エンジンにページの対応言語を通知するために、hreflangタグを設定します。

例：Headでの設定

import Head from 'next/head';

function SEO({ locales, currentLocale }) {
  return (
    <Head>
      {locales.map((locale) => (
        <link
          key={locale}
          rel="alternate"
          hrefLang={locale}
          href={`https://example.com/${locale}`}
        />
      ))}
      <link rel="alternate" hrefLang="x-default" href="https://example.com" />
    </Head>
  );
}

export default SEO;

4. メタタグの動的設定


各言語に応じた適切なメタタグを設定し、検索エンジンでの表示を最適化します。

例：ページごとのメタタグ設定

import Head from 'next/head';

function HomePage() {
  const { t } = useTranslation('homepage');
  return (
    <>
      <Head>
        <title>{t('metaTitle')}</title>
        <meta name="description" content={t('metaDescription')} />
      </Head>
      <h1>{t('title')}</h1>
      <p>{t('description')}</p>
    </>
  );
}

export default HomePage;

翻訳ファイル例：homepage.json

{
  "metaTitle": "Welcome to our Homepage - English",
  "metaDescription": "This is the homepage description for English.",
  "title": "Welcome to the Homepage",
  "description": "This is the best place to start exploring our site."
}

5. サイトマップの生成


多言語対応のサイトマップを生成することで、すべての言語ページが検索エンジンにインデックスされやすくなります。

例：動的サイトマップ生成

import fs from 'fs';
import path from 'path';

export async function getServerSideProps() {
  const baseUrl = 'https://example.com';
  const locales = ['en', 'ja'];
  const paths = ['/home', '/about'];

  const sitemap = locales
    .flatMap((locale) =>
      paths.map((p) => `${baseUrl}/${locale}${p}`)
    )
    .join('\n');

  fs.writeFileSync(path.join(process.cwd(), 'public', 'sitemap.txt'), sitemap);

  return { props: {} };
}

6. クローラビリティとアクセス解析


Google AnalyticsやSearch Consoleを活用して、各言語のページが適切にインデックスされ、トラフィックを獲得しているかをモニタリングします。

これらの施策を実施することで、Next.jsアプリケーションが多言語環境でもSEOの競争力を高めることができます。次節では、本記事のまとめを行います。

まとめ


本記事では、Next.jsを用いたi18n（国際化）対応の基本的な設定方法から、実装例や多言語SEO対応の応用例まで詳しく解説しました。翻訳ファイルの管理や言語切り替え機能の実装、サーバーサイドでの対応とトラブルシューティングのポイントを理解することで、効率的な多言語対応が可能になります。さらに、多言語SEOを最適化することで、グローバルなユーザーにもリーチできる強力なWebアプリケーションを構築できるでしょう。

Next.jsのi18n機能を活用し、世界中のユーザーに最適な体験を提供するプロジェクトをぜひ実現してください！

React
国際化 React i18n Next.js

コメント

コメントする

目次