gt-nextへの移行

概要

このガイドでは、gt-nextをスタンドアロンのi18nライブラリとして使用して、既存のNext.jsアプリを国際化する方法を説明します。このガイドは、他のi18nライブラリからgt-nextに移行する際にも役立ちます。

すべての翻訳はプロジェクトのリポジトリに保存され、あなた自身によって管理されます。さらに、翻訳はあなた自身で用意します。つまり、APIキーを追加する必要はありません。

JSONファイルの翻訳を自動生成したい場合は、CLIツールを参照してください。

仕組み

翻訳は「辞書」と呼ばれるJSONファイル（en.json、fr.jsonなど）に保存できます。キーは参照として使用され、値は翻訳されたコンテンツです：

public/dictionaries/en.json

{
  "greeting": "Hello, World!",
}

public/dictionaries/fr.json

{
  "greeting": "Bonjour, le monde!",
}

翻訳は、useDict()フックとgetDict()関数を使用してアプリで参照されます：

components/MyComponent.js

import { useDict } from 'gt-next/client';
import { getDict } from 'gt-next/server';
 
export default function MyComponent() {
  const d = useDict(); // クライアントサイド
  const d = await getDict(); // サーバーサイド
  return (
    <div>
      <h1>{d('greeting')}</h1>
    </div>
  );
}

注意: これらの翻訳はあなた自身によって管理されるため、アプリが進化するにつれて手動で更新する必要があります。つまり、コンテンツを追加または変更するたびに、翻訳ファイルを更新する必要があります。

このプロセスを自動化することに興味がある場合は、CLIツールの使用を検討してください。

セットアップ

1. 翻訳を有効にする

withGTConfig()プラグインを使用して、Next.jsアプリのi18n動作を設定します。

next.config.js

import { withGTConfig } from 'gt-next';
 
const nextConfig = {
  // Your Next.js config
};
 
export default withGTConfig(nextConfig, {
  locales: ['en', 'fr'], // Supported locales (English, French)
});

2. 辞書ローダーファイルを追加する

このloadDictionary()は翻訳を読み込む役割を担います。すべての翻訳は辞書と呼ばれるネストされたJSONファイルに保存されます。

ここでは、翻訳ファイルが/public/dictionaries/ディレクトリに保存されていることを指定します。

src/loadDictionary.js

export default async function loadDictionary(locale) {
  const t = await import(`../public/dictionaries/${locale}.json`);
  return t.default;
}

3. アプリを`<GTProvider>`でラップする

アプリを<GTProvider>でラップして、翻訳コンテキストを有効にします。これにより、クライアントサイドコンポーネントで翻訳にアクセスできるようになります。

layout.js

import { GTProvider } from 'gt-next';
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <GTProvider>
          {children}
        </GTProvider>
      </body>
    </html>
  );
}

4. 翻訳ファイルを作成する

翻訳ファイルは./public/dictionariesディレクトリに保存する必要があります。各ファイルは、それが表すロケールにちなんで名付けられるべきです。例：en.json、fr.jsonなど。

public/dictionaries/en.json

{
  "greeting": "Hello, World!",
}

次に、対応するフランス語の辞書翻訳ファイルを追加します：

public/dictionaries/fr.json

{
  "greeting": "Bonjour, le monde!",
}

5. 翻訳を使用する！

これでuseDict()とgetDict()を使って翻訳にアクセスできます。

components/MyComponent.js

import { useDict } from 'gt-next/client';
import { getDict } from 'gt-next/server';
 
export default function MyComponent() {
  const d = useDict(); // client-side
  const d = await getDict(); // server-side
  return (
    <div>
     {/* en: "Hello, World!"  fr: "Bonjour, le monde!" */}
      <h1>{d('greeting')}</h1> // [!code highlight]
    </div>
  );
}

ヒント: 変数の挿入などの辞書構文の詳細については、辞書リファレンスを参照してください。

互換性

このガイドは、他のi18nライブラリからgt-nextに移行する際に役立ちます。辞書フォーマットは一般的に他のライブラリと互換性があります。

私たちの辞書は変数、日付、数値の補間をサポートしています。詳細については辞書オプションをご覧ください。

ただし、プロジェクトで複数形や分岐などの複雑な構文を使用している場合は、それらをgt-nextの構文に変換する必要があります。

gt-nextの構文の詳細については、分岐コンポーネントのページをご覧ください。

メモ

プロジェクト内の翻訳を手動で管理するには gt-next を使用します。
翻訳は「辞書」と呼ばれるJSONファイル（en.json、fr.json など）に保存されます。
翻訳にアクセスするには useDict() と getDict() を使用します。

次のステップ

辞書の構文についての詳細は、辞書リファレンスを参照してください。
翻訳プロセスを自動化することに興味がある場合は、translate コマンドの使用を検討してください。

gt-nextへの移行

このページについて