在现代 Web 应用程序中，多语言处理是一个重要的功能。因此，大多数现代前端框架和库都提供了用于实现多语言应用程序的选项。
Next.js 是一种流行的 React 框架，它提供了一种简单而优雅的方法来构建 SSR（服务器端渲染）应用程序。与此同时，react-i18next 是一种常用的 React 库，它提供了一种简单的方法来实现多语言应用程序。在本文中，我们将讨论如何在 Next.js 中使用 react-i18next 进行多语言处理。
安装 react-i18next
首先，我们需要安装 react-i18next。你可以选择在你的项目中使用 npm 或 yarn。通过下面的命令来安装 react-i18next：
npm install react-i18next --save
或者
yarn add react-i18next
配置 i18n
在开始之前，我们需要为我们的应用程序配置一个 i18n 对象。i18n 对象包含了我们所有的语言翻译和选项。我们可以这样做：
-- -------------------- ---- -------
------ ---- ---- ----------
------ - ---------------- - ---- ----------------
----- --------- - -
--- -
------------ -
-------- -- ------- -------- -- ----- --- ---------------
------ ------- ------ ------
-
--
--- -
------------ -
-------- -- ------- ---------- - ----- -- ---------------
------ ------- --------- ------
-
-
--
---------------------------------
----------
---- -----
------------ -----
-------------- -
------------ -----
-
---
------ ------- -----在上面的例子中，我们定义了两种语言 - 英语 (en) 和法语 (fr), 并为每种语言定义了一些翻译。我们还定义了一些选项，比如默认语言，回退语言和插值等。现在，我们已经准备好开始处理多语言了。
使用 react-i18next
在我们的应用程序中使用 react-i18next 非常简单。我们只需要使用其提供的两个主要组件 - useTranslation 和 Trans。
useTranslation
useTranslation 是一个 React hook，用于获取当前选定语言的翻译。它返回一个对象，该对象包含两个属性 - t 和 i18n。
import { useTranslation } from "react-i18next";
function MyComponent() {
const { t } = useTranslation();
return <h1>{t("Welcome to React")}</h1>;
}在上面的代码片段中，我们使用 useTranslation hook 来获取当前选中语言的翻译。然后，我们使用 t 函数来获取主题。
Trans
Trans 是 react-i18next 的另一个组件，用于在我们的应用程序中提供本地化字符串。它支持用 JS 表达式和 React 组件内嵌 HTML。
-- -------------------- ---- -------
------ - ----- - ---- ----------------
-------- ------------- -
------ -
------ -------------- -------
------ ----- -------
-------- -- ----------
--------
--
-在上面的代码片段中，我们使用 Trans组件来渲染本地化字符串，其中表示字符串的变量名为 value。同时，在 Trans 组件中我们内嵌了一个 h1 标签和一个 p 标签。 Trans 开头的 i18nKey指定引用的翻译。
总结
在本文中，我们介绍了如何使用 react-i18next 来实现一个多语言 Next.js 应用程序。我们通过配置一个 i18n 对象，并使用 useTranslation hook 和 Trans 组件来实现本地化字符串。希望这篇文章对你进行多语言处理有所启发，并且可以帮助你更好地了解 Next.js 和 react-i18next 的使用。
参考代码
以上只是一个简单的例子，实际过程中应当将翻译表和选项定义在一个单独的文件夹中。下面是一个更完整的示例，供参考:
-- -------------------- ---- ------- -- ------ ---- ------- ------ -- -------- ----------- ------ -- -------- ----------- ---- ---------- -- --- ---- ---------- ------ --- ------ --------- ------ --- ---- ----- ------ --- ------ -------- ------ --- ---- ------- -- ------------
文件夹 locales 包含所有语言的翻译表。每个语言都有自己的文件夹，并包含一个 common.json 文件，其中存储此语言的翻译。
index.js:
-- -------------------- ---- -------
------ ---- ---- ------------
------ - -------------- - ---- ----------------
------ ------ ---- -----------------------
----- ---- - -- -- -
----- - - - - -----------------
------ -
-----
------- --
---- -----------------
--- ----------------------------- -- -------------
-- --------------------------------- ------------
----- --------- -------------------
------- ----------
-------
------
------ ------
----- -
------ -----
------ -----
-------- -----
-------- -----
---------------- -------
------------ -------
--------------- -------
-
------ -
------- --
------------ -----
---------- -----
-
-------
-------------
------- -
----------- -------
-
------------ -
------------ ----
---------- -------
-
------- -
------ -----
----------------- --------
-------------- -----
-------- -----
---------- -------
----------- -----
-
------------- -
------- --------
-
----------
------
--
--
------ ------- -----NavBar.js:
-- -------------------- ---- -------
------ ---- ---- ------------
------ - -------------- - ---- ----------------
----- ------ - -- -- -
----- - ---- - - -----------------
----- -------------- - ----- -- -
-------------------------
--
------ -
-----
----
----
----- ---------
-- ------------------
---- --------------- ------------- --
----
-------
-----
----
-- ----------- -- ----------------------------
-----
----
-- ----------- -- ----------------------------
-----
-----
------ ------
--- -
----------------- -----
-------- -----
---------------- --------------
------------ -------
------- -----
-
-- -
------- --
-------- --
-------- -----
-
-- -
---------------- -----
-
------ -
-------- -------------
-------- ---- -----
-
--- -
------- -----
-
- -
------ -----
---------------- -----
-------- ---- -----
-------- -------------
-
------- -
----------------- -----
------- --------
-
-------- -
----------------- --------
-
----------
------
--
--
------ ------- -------i18n.js:
-- -------------------- ---- -------
------ ---- ---- ----------
------ - ---------------- - ---- ----------------
-- ------ ------------
------ ------------- ---- -----------------------------------
------ ------------- ---- -----------------------------------
-- ---------- ----
---------------------------------
---------- -
--- -
------------ --------------
--
--- -
------------ --------------
--
--
---- -----
------------ -----
-------------- -
------------ ------
--
---
------ ------- -----注: 完整可运行的代码可以在 GitHub 的示例应用程序中找到。
参考文献
译者
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648d263348841e9894b72a75