随着全球化的发展，多语言网站变得越来越普遍，前端开发遇到了多语言处理的难题。在 React 生态中，处理多语言最常用的方案就是 i18n，即国际化。
Next.js 是 React 生态中的一个热门框架，它包含了服务端渲染和静态页面生成等功能，因此也非常适合构建多语言网站。本文将介绍在 Next.js 中如何使用 i18n 处理多语言。
安装 i18n 库
首先，需要安装一个 i18n 库。在 React 生态中 i18next 是较为流行的一个国际化库，它支持多种语言，包括各种浏览器环境和服务端框架。
安装 i18next：
--- ------- -------
配置 i18next
接下来，需要在 Next.js 中配置 i18next。这里先创建一个新的 _app.js 文件，在其中引入 i18next 和 i18next-browser-languageDetector：
------ ----- ---- -------- ------ --- ---- ----------- ------ ---- ---- ---------- ------ ---------------- ---- ----------------------------------- -------- ------- ---------- --------- -- - ------ ---------- -------------- --- - --------------------- - ----- ------------ -- - ----- -------- - ----- -------------------------------- ------ - ----------- -- -- ------ ------- ------
然后配置 i18next 的语言检测器：
---------------------------------
---------- -
--- -
------------ -
-- ----
--
--
--- -
------------ -
-- ----
--
--
--
---------- -
------ ---------- --------------- -------------
------- -----------
--
---这里定义了两种语言，英语（en）和中文（zh），并在各自的 translation 中添加了翻译内容，具体的翻译内容会在下面介绍。
代码中的 detection 字段指定了 i18next 的语言检测器。它采用一个检测器数组，检测器数组中的每个元素指定了检测的方式。这里采用了三种检测方式，先在 cookie 中查找语言设置，如果没有则在 localStorage 中查找，最后采用 navigator 的语言设置。
编写 i18n 类型定义
为了方便使用，本例中会定义一个 t 函数，用于快速翻译。下面先添加一个 i18n 类型定义（建议添加到 src/types/i18next.d.ts 中）：
------- ------ --------- -
------ --------- --------- -
------ ------- --------
---- ----- - - ---- ------ ------------- ------ --
------ ----- ------- ----- - -- - -------------- --------
-- -------
-
-这个类型定义允许 t 函数使用泛型参数，自动获取翻译内容和翻译占位符的类型。
构造 t 函数
本例中采用一个高阶组件 HOC（Higher Order Component）的形式，构造一个 t 函数，用于快速翻译。下面创建一个 withTranslation.tsx 文件：
------ ----- ---- --------
------ ----- - --------- - ---- ----------
------ ----- --------------- - ------- ------- ----
---------- ---------------------------
- -- -
----- ------------------------ - ------- ------- -- -
----- -- --------- - ----- ----- -- ---------- -- ------- ------
------ ---------- ---------- ----- ---
--
---------------------------------------- - ----- ----- ---- -- -
--- -------------
-- --------------------------- -
------------ - ----- -------------------------------
-
------ -
----------------
--
--
------ -------------------------
--这里定义了一个 withTranslation HOC 函数，它接受一个组件作为参数，并返回一个新的组件。这个新组件会把 t 函数作为一个 props 传递给原有的组件。
其中，getInitialProps 函数是用于 Next.js 的服务端渲染的。如果原有组件定义了 getInitialProps 函数，则需要将它复制到新组件中。
在页面中使用 i18n
现在，在页面中可以使用 t 函数来获取翻译内容。下面创建一个新的页面 pages/index.tsx：
------ ----- ---- --------
------ - --------------- - ---- ------------------------------------
--------- ----- -
-- ----- ------- -- -------
-
----- ---- - -- - -- ------ -- -
------ -
-----
-----------------------
-------------------
---
------------------ -
------ --
---
----
------
--
--
------ ------- ----------------------在这个页面中，会输出三个翻译内容。t("welcome") 表示输出 welcome 翻译内容，t("intro") 和 t("clickMessage") 同理。t 函数的第二个参数是一个对象，在这里用于传递翻译占位符的值。
现在回到 i18n 的配置：
---------------------------------
---------- -
--- -
------------ -
-------- -------- -- -- ---------
------ ----- -- -- -------- -------
------------- ---- ------- --------- --------
--
--
--- -
------------ -
-------- -----------
------ ------------
------------- ----- --------- ----
--
--
--
---------- -
------ ---------- --------------- -------------
------- -----------
--
---这里完成了翻译内容的定义。其中，{{count}} 表示翻译占位符。在 t 函数中传递的 { count: 3 } 对应了这个占位符。
总结
本文介绍了在 Next.js 中使用 i18n 处理多语言的方法。通过 i18n，可以轻松地构建多语言网站，并统一管理不同语言版本的页面。i18next 是目前 React 生态中最流行的国际化库，但也可以使用其他库完成同样的任务。
通过本文的介绍，应该已经掌握了 Next.js 中使用 i18n 的基本方法。在实际开发过程中，还需要注意更多细节，例如快速切换语言、多语言 SEO、国际化翻译的最佳实践等。下一步，可以进一步深入学习，并在实际项目中进行尝试。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6458cbf3968c7c53b0b1bda2