Next.js 极速上手
我们来速通创建一个新应用，并用 GT 实现国际化。
概览
在本指南中，我们将介绍两项内容：
- 创建一个新的 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 key 和 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() 获取当前 locale。
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。 - 如果切换语言后翻译未生效，请检查浏览器的 cookies。
下一步
这份指南怎么样？