极速体验 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 --save-dev步骤 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() 来获取当前的语言环境。
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。
后续步骤
这份指南怎么样？