极速体验 Next.js

概述

在本指南中，我们将介绍两件事：

创建一个新的 Next.js 应用
使用通用翻译进行国际化

总共应该花费不到 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：添加您的环境变量。

导航到仪表板。转到导航栏上的 Dev Api Keys 页面，创建一个新的 API 密钥和项目 ID。然后将它们添加到您的 .env 文件中。

GT_API_KEY="YOUR_GT_API_KEY"
GT_PROJECT_ID="YOUR_GT_PROJECT_ID"

步骤 4：运行 CLI 工具

运行 CLI 工具以设置您的代码库进行翻译。

npx gtx-cli setup

第五步：修改根布局

修改 src/app/layout.tsx 文件中 <html> 标签的 lang 属性。

它应该使用 await getLocale() 来获取当前的语言环境。

src/app/layout.tsx

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>
  );
}

第六步：启动你的应用程序

你的应用程序已经国际化了！🎉 让我们来测试一下吧！

让我们更改浏览器的语言设置。

在 Chrome 中更改语言
在 Firefox 中更改语言
在 Edge 中更改语言

启动你的 Next.js 应用程序。

npm run dev

在你喜欢的浏览器中打开你的应用程序（通常在 http://localhost:3000）。如果你一切设置正确，你应该会看到你的应用程序显示为你在浏览器中设置的语言。

极速体验 Next.js

概述

前提条件

步骤 1：创建一个新的 Next.js 应用

步骤 2：安装库

步骤 3：添加您的环境变量。

步骤 4：运行 CLI 工具

第五步：修改根布局

第六步：启动你的应用程序

故障排除

注意事项

下一步

在本页面

极速体验 Next.js

即使我更改了浏览器的语言，我的应用程序的语言也没有改变。

在本页面