快速上手 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。 - 如果切换语言后翻译未生效，请检查浏览器的 Cookie。
后续步骤
本指南如何?