# gt-next: General Translation Next.js SDK: Next.js速習
URL: https://generaltranslation.com/ja/docs/next/tutorials/examples/next-speedrun.mdx
---
title: Next.js速習
description: 新しいアプリをすばやく作成し、GTで国際化してみましょう
---
## 概要
このガイドでは、次の 2 つを行います。
* 新しい Next.js アプリを作成する
* General Translation を使って国際化する
所要時間は、合計で 10 分以内です。
## 前提条件
React をある程度使ったことがあり、TypeScript にも慣れていることを前提としています。
***
## ステップ 1: 新しい Next.js アプリを作成する
まず、ターミナルで任意のディレクトリに移動し、以下のコマンドを実行します。
```bash copy
npx create-next-app next-quickstart --ts --tailwind --eslint --app --use-npm --src-dir
```
セットアップウィザードが表示されたら、各オプションはデフォルト値のままで問題ありません。
## ステップ 2: ライブラリをインストールする
Next.js プロジェクトのルートディレクトリに移動し、次を実行します。
```bash copy
cd next-quickstart
npm i gt-next
npm i gt
```
## ステップ 3: 環境変数を追加します。
[ダッシュボード](https://generaltranslation.com/en-US/signin)に移動します。
ナビゲーションバーの Dev API Keys ページを開き、新しい API キーと Project ID を作成します。
その後、それらを `.env` ファイルに追加します。
```bash copy
GT_API_KEY="YOUR_GT_API_KEY"
GT_PROJECT_ID="YOUR_GT_PROJECT_ID"
```
## ステップ 4: CLI ツールを実行する
CLI ツールを実行して、コードベースを翻訳対応できるようにセットアップします。
```bash copy
npx gt setup
```
## ステップ5: ルートレイアウトを変更する
`src/app/layout.tsx` ファイルの `` タグにある `lang` prop を変更します。
現在のロケールの取得には `await getLocale()` を使用します。
```javascript title="src/app/layout.tsx" copy
import { GTProvider } from "gt-next"; // [!code highlight]
import { getLocale } from "gt-next/server"; // [!code highlight]
...
export default async function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
const locale = await getLocale(); // [!code highlight]
return (
// [!code highlight]
{children}
);
}
```
## ステップ6: アプリを起動する
アプリの国際化が完了しました！ 🎉
テストしてみましょう！
ブラウザの言語設定を変更してみましょう。
* [Chrome](https://support.google.com/chrome/answer/173424) で言語を変更する
* [Firefox](https://support.mozilla.org/en-US/kb/use-firefox-another-language) で言語を変更する
* [Edge](https://support.microsoft.com/en-us/microsoft-edge/use-microsoft-edge-in-another-language-4da8b5e0-11ce-7ea4-81d7-4e332eec551f) で言語を変更する
Next.js アプリを起動しましょう。
```bash copy
npm run dev
```
お好みのブラウザでアプリを開いてください (通常は [http://localhost:3000](http://localhost:3000) です) 。
正しく設定できていれば、ブラウザで設定した言語でアプリが表示されるはずです。
***
## トラブルシューティング
**ブラウザの cookie**
アプリのブラウザ cookie を確認してください。
General Translation では、ユーザーの言語設定を保存するために cookie を使用します。
cookie の名前は `generaltranslation.locale` なので、これを削除するだけで大丈夫です。
`localhost:3000` にあります。
その後、使用したい優先言語が設定されていることをもう一度確認してから、
ページを再読み込みしてください。
これ以降は、cookie を削除する必要はありません。
cookie の確認方法:
* [Chrome](https://support.google.com/chrome/answer/95647)
* [Firefox](https://support.mozilla.org/en-US/kb/delete-cookies-remove-info-websites-stored)
* [Safari](https://support.apple.com/en-mn/guide/safari/sfri11471/16.0/mac/11.0)
* [Edge](https://support.microsoft.com/en-us/microsoft-edge/delete-cookies-in-microsoft-edge-63947406-40ac-c3b8-57b9-2a946a29ae09)
***
## 注意事項
* 任意の JSX は `` コンポーネントで翻訳できます。
* 言語を変更しても翻訳されない場合は、ブラウザの cookie を確認してください。
## 次のステップ
* GitHub リポジトリ [gt-next](https://github.com/General-Translation/gt-next) にスターを付けます。
* [右から左 (RTL) 言語のサポート](/docs/next/guides/rtl) を設定します。