Next.js 快速入门

概述

本指南描述了如何国际化一个使用App Router的现有Next.js项目。

对于使用Pages Router的项目，请参照React文档。

我们将涵盖4个简单步骤：

安装gt-next和gtx-cli

选择语言

添加<T>组件

添加您的环境变量

整个过程应该不超过5分钟。

您是否正在使用Next.js pages router？请改为参照React快速入门指南。

设置

1. 安装库

安装 gt-next 和 gtx-cli 库。

npm i gt-next
npm i gtx-cli --save-dev

2. 添加 `withGTConfig()` 插件

将 withGTConfig() 添加到你的 next.config.js 文件中。你可以通过传递一个语言代码数组来指定你想要支持的语言。

next.config.js

import { withGTConfig } from 'gt-next/config';
 
const nextConfig = {};
 
export default withGTConfig(nextConfig, {
  locales: ['pt', 'es'], // 支持葡萄牙语和西班牙语
});

3. 添加 `<T>` 组件

将任何嵌套的 JSX 内容包装在 <T> 组件中，使其可翻译。有关更多信息，请查看使用 <T> 组件的指南。

Example.js

import { T } from "gt-next";
 
export default function Example() {
  return (
    <T>
      <p>
        这部分会被翻译。
      </p>
    </T>  
  );
}

使用 <Var> 组件来指定不应该被翻译的 JSX 内容。

Example.js

import { T, Var } from "gt-next";
 
export default function Example() {
  return (
    <T>
      <p>
        这部分会被翻译。 <Var>这部分不会被翻译。</Var>
      </p>
    </T>  
  );
}

提示： 为了节省时间，运行设置命令。这将扫描你的代码库中可翻译的 JSX 并为你插入 <T> 标签。

shell

npx gtx-cli setup

对于字符串，你可以使用 useGT() 或 getGT() 进行翻译。有关更多信息，请查看此指南。

Example.js

import { useGT } from "gt-next/client";
import { getGT } from "gt-next/server";
 
export default function Example() {
  const t = useGT(); // 客户端
  const t = await getGT(); // 服务器端
  return (
    <p>
      {t("这部分会被翻译。")}
    </p>
  );
}

4. 添加你的环境变量

将你的 API 密钥和项目 ID 添加到本地环境中。

导航到控制面板。在侧边栏中进入开发者密钥页面。

点击创建开发 API 密钥。

将项目 ID 和开发 API 密钥添加到你的环境中。

.env.local

GT_API_KEY="YOUR_GT_API_KEY"
GT_PROJECT_ID="YOUR_GT_PROJECT_ID"

保护你的 API 密钥！

开发密钥只应该在开发环境中使用。同样，生产密钥只应该在生产环境中使用。 永远不要将你的 API 密钥提交到公共仓库！

让我们试试看！

恭喜！🥳 您的应用程序现在支持多语言了！让我们看看它的实际效果。

以不同语言查看您的应用程序

将 <LocaleSelector> 组件添加到您的应用程序中。这将允许您为应用程序选择不同的语言。

提示： 您也可以在浏览器设置中更改语言。

在开发模式下启动您的 Next.js 应用程序。

npm run dev

在您喜欢的浏览器中打开应用程序（通常在 http://localhost:3000）。

故障排除

部署到生产环境

请参考我们关于部署到生产环境的指南。

下一步

查看我们的 Next.js API 参考，了解关于 <T> 组件和其他可用组件的详细信息。
使用 <Num>、<Currency>、 <Branch> 和 <Plural> 组件改进您的内容。
了解如何通过 i18n 路由（为每个语言环境添加路由，例如 example.com/en、example.com/fr）来提高 SEO。
镜像您的应用以支持从右到左的语言，如阿拉伯语和希伯来语。
使用 Next.js 插件为您的应用创建已批准语言的列表。

Next.js 快速入门

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

为什么在开发环境中语言加载需要很长时间？

为什么有些内容被翻译而其他内容没有？

在本页面