Next.js クイックスタート

概要

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

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

4つの簡単なステップをカバーします：

この全プロセスは5分以内で完了するはずです。

セットアップ

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>
        This gets translated.
      </p>
    </T>  
  );
}

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

import { T, Var } from "gt-next";
 
export default function Example() {
  return (
    <T>
      <p>
        This gets translated. <Var>This does not.</Var>
      </p>
    </T>  
  );
}

npx gtx-cli setup

文字列の場合、翻訳には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("This gets translated.")}
    </p>
  );
}

4. 環境変数の追加

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

GT_API_KEY="YOUR_GT_API_KEY"
GT_PROJECT_ID="YOUR_GT_PROJECT_ID"

試してみましょう！

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

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

npm run dev 

トラブルシューティング

本番環境へのデプロイ

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

次のステップ

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