在 Next.js 中使用 i18n-JavaScript中文网-JavaScript教程资源分享门户

随着全球化的加速，不同语言的用户数量也越来越多。作为前端开发者，如何实现网站的国际化也成为了必备的技能。在 Next.js 中使用 i18n 是一种很好的实现方式。在本文中，我们将详细介绍如何在 Next.js 应用中使用 i18n，并提供示例代码和指导。

什么是 i18n

i18n 是 internationalization 的缩写，指的是国际化。在前端开发中，i18n 通常用来指代“本地化字符串”。本地化字符串就是将网站中使用的字符串按照用户所选的语言进行翻译。

在 Next.js 中使用 i18n 非常方便。我们可以使用 next-i18next 这个库来实现。下面是使用步骤：

Step 1 安装依赖

首先，我们需要安装 i18next 和 react-i18next 两个依赖。这两个依赖是配合使用的，i18next 用来处理本地化字符串的相关逻辑，react-i18next 用来将本地化字符串渲染到组件中。

npm install i18next react-i18next

然后，我们进入 next.config.js 文件，编写以下内容：

// javascriptcn.com 代码示例
const withPlugins = require("next-compose-plugins");
const withImages = require("next-images");
const withCSS = require("@zeit/next-css");
const { i18n } = require("./next-i18next.config");

module.exports = withPlugins([[withCSS], [withImages]], {
  i18n,
  webpack: (config, { isServer }) => {
    if (isServer) {
      const antStyles = /antd\/.*?\/style.*?/;

      const origExternals = [...config.externals];
      config.externals = [
        (context, request, callback) => {
          if (request.match(antStyles)) return callback();

          if (typeof origExternals[0] === "function") {
            origExternals[0](context, request, callback);
          } else {
            callback();
          }
        },
        ...(typeof origExternals[0] === "function" ? [] : origExternals),
      ];

      config.module.rules.unshift({
        test: antStyles,
        use: "null-loader",
      });
    }

    return config;
  },
});

Step 2 创建本地化字符串文件

我们将所有字符串放在一个 JSON 文件中，每个语言一个文件。例如，我们在 public/locales 文件夹下创建两个文件 en.json 和 zh.json。

// en.json
{
  "welcome": "Welcome to my website!",
  "developer": "Developer",
  "designer": "Designer",
  "learn more": "Learn more"
}

// zh.json
{
  "welcome": "欢迎来到我的网站！",
  "developer": "开发人员",
  "designer": "设计师",
  "learn more": "了解更多"
}

Step 3 配置 i18n

在 next-i18next.config.js 文件中，我们需要配置 i18n 的相关信息和选项。例如：

// javascriptcn.com 代码示例
const path = require("path");

module.exports = {
  localePath: path.resolve("./public/locales"),
  locales: ["en", "zh"],
  defaultLocale: "en",
  shallowRender: true,
  cleanCode: true,
  serializeConfig: true,
};

其中，localePath 用来指定存储本地化字符串的路径，locales 用来指定支持的语言种类，defaultLocale 用来指定默认语言，shallowRender 和 cleanCode 分别用来控制 i18n 注入的相关代码，serializeConfig 用来控制是否为客户端注入翻译字符串配置。

Step 4 在组件中使用 i18n

在组件中使用 i18n 也非常简单。我们只需要使用 useTranslation hook 就可以了。例如：

// javascriptcn.com 代码示例
import React from "react";
import { useTranslation } from "react-i18next";

const HomePage = () => {
  const { t } = useTranslation();

  return (
    <>
      <h1>{t("welcome")}</h1>
      <ul>
        <li>{t("developer")}</li>
        <li>{t("designer")}</li>
      </ul>
      <button>{t("learn more")}</button>
    </>
  );
};

export default HomePage;

Step 5 切换语言

我们也需要为用户提供语言切换的功能。这可以通过 useTranslation hook 中提供的 i18n 对象来完成。例如：

// javascriptcn.com 代码示例
import React from "react";
import { useTranslation } from "react-i18next";

const LanguageSwitcher = () => {
  const { i18n } = useTranslation();

  const handleLanguageChange = (e) => {
    const selectedLanguage = e.target.value;
    i18n.changeLanguage(selectedLanguage);
  };

  return (
    <>
      <select onChange={handleLanguageChange}>
        <option value="en">English</option>
        <option value="zh">中文</option>
      </select>
    </>
  );
};

export default LanguageSwitcher;

到这里，我们就完成了一个简单的国际化应用的开发。

总结

在本文中，我们学习了如何在 Next.js 应用中使用 i18n。包括安装依赖，创建本地化字符串文件，配置 i18n，使用 useTranslation hook，以及切换语言。实现国际化不仅仅是为了翻译字符串，更重要的是为了让不同语言的用户能够更好地使用我们的网站或应用。

示例代码

https://github.com/jingwhale/next-i18n-example

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6534f9397d4982a6ebab6e9a