Next.js スピードラン

新しいアプリを作成し、GTで国際化する方法をスピードランでご紹介します。

概要

このガイドでは、次の2つの内容について説明します。

新しいNext.jsアプリの作成
General Translationを使った国際化

全体で10分以内で完了するはずです。

前提条件

Reactを何らかの形で使用した経験があり、Typescriptに慣れていることを前提としています。

ステップ 1: 新しい Next.js アプリを作成する

まず、ターミナルで任意のディレクトリに移動し、次のコマンドを実行してください。

npx create-next-app next-quickstart --ts --tailwind --eslint --app --use-npm --src-dir

セットアップウィザードが表示されますので、各オプションはデフォルト値を選択すれば問題ありません。

ステップ 2: ライブラリをインストールする

Next.js プロジェクトのルートディレクトリに移動し、次のコマンドを実行してください:

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

ステップ 3: 環境変数を追加しましょう。

Dashboard にアクセスしてください。
ナビゲーションバーの Dev Api Keys ページに移動し、新しい API キーと Project ID を作成します。
それらを .env ファイルに追加してください。

GT_API_KEY="YOUR_GT_API_KEY"
GT_PROJECT_ID="YOUR_GT_PROJECT_ID"

ステップ 4: CLI ツールを実行する

CLI ツールを実行して、翻訳のためにコードベースをセットアップします。

npx gtx-cli setup

ステップ 5: ルートレイアウトを修正する

src/app/layout.tsx ファイルの <html> タグ内の lang プロップを修正します。

現在のロケールを取得するために await getLocale() を使用する必要があります。

src/app/layout.tsx

import { GTProvider, getLocale } from "gt-next"; 
...
export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const locale = await getLocale(); 
  return (
    <html lang={locale}> // [!code highlight]
      <GTProvider>
        <body
          className={`${geistSans.variable} ${geistMono.variable} antialiased`}
        >
        {children}
        </body>
      </GTProvider>
    </html>
  );
}

ステップ 6: アプリを起動する

あなたのアプリは国際化されました！🎉 テストしてみましょう！

ブラウザの言語設定を変更してみましょう。

Chrome で言語を変更する
Firefox で言語を変更する
Edge で言語を変更する

Next.js アプリを起動します。

npm run dev

お好みのブラウザでアプリを開きます（通常は http://localhost:3000 です）。すべて正しく設定されていれば、ブラウザで設定した言語でアプリが表示されるはずです。

トラブルシューティング

注意事項

任意のjsxを翻訳するには、<T>コンポーネントを使用してください。
言語を変更しても翻訳が反映されない場合は、ブラウザのクッキーを確認してください。

次のステップ

私たちのGitHubリポジトリ gt-next にスターを付けてください。
右から左への言語サポートを設定しましょう。
より高度な例を試してみてください。

Next.js スピードラン

ブラウザの言語を変更したのに、アプリの言語が変わりません。

このページについて