Next.js クイックスタート

概要

このガイドでは、App Routerを使用している既存のNext.jsプロジェクトを国際化する方法について説明します。

Pages Routerを使用しているプロジェクトの場合は、Reactドキュメントに従ってください。

以下の3つの簡単なステップを説明します：

セットアップ

1. セットアップウィザードの実行

セットアップウィザードがプロジェクトの国際化プロセスをガイドします。

npx gtx-cli@latest init

手動でプロジェクトをセットアップするには、手動セットアップガイドに従ってください。

セットアップウィザードは以下を行います：

1. 必要なライブラリをインストールします。
2. プロジェクトのサポートされる言語を設定します。
3. プロジェクトのJSXコンポーネントを<T>コンポーネントでラップします。
4. next.config.jsファイルにwithGTConfig()を追加します。
5. プロジェクト用の本番APIキーとプロジェクトIDを生成します。

詳細についてはセットアップウィザードのドキュメントをご覧ください。

2. 環境変数の追加

セットアップウィザードはプロジェクトのルートに本番APIキーとプロジェクトIDを含む.env.localファイルを作成します。

ただし、開発モードでgt-nextを使用するには、本番用ではなく開発用APIキーを追加する必要があります。

GT_API_KEY="YOUR_GT_API_KEY"
GT_PROJECT_ID="YOUR_GT_PROJECT_ID"

3. 文字列のクリーンアップ

セットアップウィザードはプロジェクトのすべてのJSXコンポーネントを<T>コンポーネントでラップします。 ただし、文字列は影響を受けないことに気づくかもしれません。

例えば、次のような文字列定数がある場合：

export default function Example() {
  const greeting = "Hello, world!";
  return <p>{greeting}</p>;
}

セットアップウィザードはこの文字列に触れません。

これを修正するには、useGT()フックとgetGT()関数を使用して文字列を翻訳できます。

import { useGT } from "gt-next/client";
export default function Example() {
  const t = useGT();
  return <p>{t("Hello, world!")}</p>;
}

試してみましょう！

おめでとうございます！🥳 あなたのアプリは多言語対応になりました！実際に動作を確認してみましょう。

異なる言語でアプリを表示する

npm run dev 

トラブルシューティング

本番環境へのデプロイ

本番環境へのデプロイに関するガイドをご覧ください。

次のステップ

• <T>コンポーネントやその他の利用可能なコンポーネントについての詳細情報は、Next.js APIリファレンスをご覧ください。
• <Num>、<Currency>、 <Branch>、および<Plural>コンポーネントを使用してコンテンツを改善しましょう。
• i18nルーティング（各ロケールのルートを追加、例：example.com/en、example.com/fr）や静的サイト生成でSEOを向上させる方法を学びましょう。
• アラビア語やヘブライ語などの右から左に読む言語をサポートするためにアプリをミラーリングしましょう。

手動セットアップ

手動でセットアップを行いたい場合は、以下の手順に従ってください。

1. ライブラリのインストール

gt-nextとgtx-cliライブラリをインストールします。

npm i gt-next
npm i gtx-cli --save-dev

2. withGTConfig()プラグインの追加

withGTConfig()をnext.config.jsファイルに追加します。 サポートしたい言語をロケールコードの配列として指定できます。

import { withGTConfig } from 'gt-next/config';
 
const nextConfig = {};
 
export default withGTConfig(nextConfig, {
  locales: ['pt', 'es'], // ポルトガル語とスペイン語のサポート
});

3. <T>コンポーネントの追加

翻訳可能にするために、ネストされたJSXコンテンツを<T>コンポーネントでラップします。 詳細については、<T>コンポーネントの使用ガイドをご確認ください。

import { T } from "gt-next";
 
export default function Example() {
  return (
    <T>
      <p>
        これは翻訳されます。
      </p>
    </T>  
  );
}

翻訳すべきでないJSXコンテンツを指定するには、<Var>コンポーネントを使用します。

import { T, Var } from "gt-next";
 
export default function Example() {
  return (
    <T>
      <p>
        これは翻訳されます。 <Var>これは翻訳されません。</Var>
      </p>
    </T>  
  );
}

文字列の場合は、翻訳のためにuseGT()またはgetGT()を使用できます。

import { useGT } from "gt-next/client";
import { getGT } from "gt-next/server";
 
export default function Example() {
  const t = useGT(); // クライアントサイド
  const t = await getGT(); // サーバーサイド
  return (
    <p>
      {t("これは翻訳されます。")}
    </p>
  );
}

4. 環境変数の追加

APIキーとプロジェクトIDをローカル環境に追加します。

GT_API_KEY="YOUR_GT_API_KEY"
GT_PROJECT_ID="YOUR_GT_PROJECT_ID"