# gt-next: General Translation Next.js SDK: Next.js 速通
URL: https://generaltranslation.com/zh/docs/next/tutorials/examples/next-speedrun.mdx
---
title: Next.js 速通
description: 一起来快速创建一个新应用，并用 GT 实现国际化
---
## 概述
本指南将介绍两件事：
* 创建一个新的 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) 点个 Star。
* 配置[从右到左语言支持](/docs/next/guides/rtl)。