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ステップ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 プロパティを変更します。
現在の locale を取得するために await getLocale() を使用してください。
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: アプリを起動する
アプリの国際化が完了しました！ 🎉 動作を確認してみましょう。
ブラウザの言語設定を変更します。
Next.js アプリを起動します。
npm run devお使いのブラウザでアプリを開きます（通常は http://localhost:3000）。 すべて正しく設定できていれば、ブラウザで設定した言語でアプリが表示されます。
トラブルシューティング
メモ
<T>コンポーネントで任意の JSX を翻訳できます。- 言語を変更しても翻訳が反映されない場合は、ブラウザの Cookie を確認してください。
次のステップ
- GitHub リポジトリ gt-next にスターを付ける
- 右から左への言語サポートを設定する
このガイドはどうでしたか？