Next.js スピードラン

新しいアプリを作成し、GTで国際化するスピードランをしましょう。

概要

このガイドでは、次の2つのことを説明します：

新しいNext.jsアプリの作成
一般的な翻訳を使用した国際化

全体で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: 環境変数を追加します。

ダッシュボードに移動します。ナビゲーションバーのDev Api Keysページに移動し、新しいAPIキーとプロジェクト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 スピードラン

ブラウザの言語を変更したのに、アプリの言語が変わらない。

このページについて