在现今全球化的时代，多语言支持是一个非常关键的需求。在 web 开发中，本地化和国际化是两个常见的概念。本地化是指将应用程序适应不同的语言和地区，而国际化则是指将应用程序设计为可以方便地本地化。
如果您正在使用 Next.js 开发应用程序，并且需要支持本地化和国际化，请继续阅读本文。我们将为您提供详细的说明，并提供示例代码以供参考。
安装 i18next
i18next 是一个流行的国际化库，为 Next.js 应用程序提供了一些方便的工具。您可以通过 NPM 或 Yarn 安装它：
--- ------- ------- -------------
或者
---- --- ------- -------------
设置 i18next
首先，在 pages 目录下创建一个 _app.js 文件。这是 Next.js 应用程序的根组件，用于在整个应用程序中保持状态。将以下代码添加到 _app.js 文件的顶部：
------ ---- ---- ---------- ------ - ---------------- - ---- ----------------
然后，将以下代码添加到 _app.js 文件的根组件（通常是 App 组件）中：
-------- ------- ---------- --------- -- - ------ ---------- -------------- --- - ------ ------- --------------------------
这将使整个应用程序具备本地化和国际化的能力。
创建翻译文件
在应用程序的 public/static/locales 目录下创建一个新目录，例如 en。在该目录下创建一个名为 translation.json 的文件，并用以下内容填充：
- ---------- ---------- -------- -------- ------------ -
创建一个名为 fr 的新目录，并在其中创建一个 translation.json 文件。将以下内容添加到该文件：
- ---------- ------------ -------- ------------ -------- -
您可以创建任意数量的翻译文件。每个目录表示一种语言或地区。每个目录中应包含一个 translation.json 文件，其中定义了相同的键，但使用不同的翻译。
在组件中使用翻译
在组件中使用 useTranslation 钩子来获取需要翻译的文本。例如，以下代码显示了如何在 Home 组件中使用 useTranslation 钩子：
------ - -------------- - ---- ----------------
-------- ------ -
----- - - - - -----------------
------ -
-----
-----------------------
-------------------
------
--
-
------ ------- -----在这个例子中，t 函数接受一个键，并返回该键的翻译文本。当应用程序的语言环境改变时，i18next 将自动更新翻译。
切换语言
要在应用程序中切换语言，您可以使用 useTranslation 钩子中的 i18n 对象。下面是一个将应用程序切换到法语的示例：
-------- -------------------- - -------------------------- - ------- ----------- -- -------------------------------------
在此示例中，单击按钮将应用程序的语言环境更改为法语。
结论
在本文中，我们介绍了如何在 Next.js 应用程序中使用 i18next ，实现本地化和国际化功能并提供了示例代码。如果您正在创建一个多语言网站或应用程序，我们希望这篇文章能为您提供一些帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6707a47cd91dce0dc86af212