Next.js 中使用 i18n 国际化

阅读时长 6 分钟读完

随着全球化的发展,使用多语言网站已经成为大多数公司的标准做法。在前端开发中,国际化(i18n)已经成为不可或缺的一部分,它能够帮助我们为全球受众提供更好的用户体验。Next.js 是一个流行的 React 框架,它提供了一种简单但强大的方法来实现国际化。

安装和配置

在 Next.js 中使用 i18n 首先需要安装 next-i18next 包,这是一个封装了 i18next 的 Next.js 插件。可以通过以下命令进行安装:

next-i18next 插件被推出时,它将其安装指南的整个部分分为一组分步骤。这是因为 i18next 有很多设置,本文节选了一些关键的配置。其他更深入的设置可参见文档。

初始化 i18n

如果你使用的是默认设置,可以在 i18n.js 中进行以下配置:

上述代码中,配置了默认语言为英语,其他语言为德语,locales 文件夹放在根目录下的 public 文件夹。

初始化插件

在 Next.js 中使用 i18n 需要按照以下步骤初始化插件:

-- -------------------- ---- -------
-- --------------
----- - ------------------- - - ---------------------------------

----- -------------- - -
  --- -----
  --- -----
--

-------------- - -
  --------- ----- -- -- ------------------------------------
  -------------------- -
    ---------------
  --
--

上述代码中,我们使用 nextI18NextRewritespublicRuntimeConfig,以确保 Next.js 能够理解 URL 中的语言子路径。这允许我们将语言代码嵌入 URL 中,以实现更好的可操作性。例如,对于英语网站,我们可以将 http://localhost:3000/about 转换为 http://localhost:3000/en/about

要允许 Next.js 在构建时自动生成这些重写,需要向你的的 next.config.js 文件中添加以下内容:

-- -------------------- ---- -------
-- --------------
----- - ---- - - --------------------------------

-------------- - -
  -- ---
  --------- ----- -- -- -
    ------ --------- --------------------------
  -
  -- ---
-

使用 i18nProvider 组件

在你的 _app.js 文件中导入 i18nProvider 组件,并向其添加 nextI18Next 插件作为参数,如下所示:

-- -------------------- ---- -------
-- -------
------ ----- ---- --------
------ --- ---- -----------
------ - ------------------ - ---- ---------------
------ - --------------- - ---- ----------------
------ - ---------------- - ---- ----------------
------ ---- ---- ---------

-------- ------- ---------- ---------- ---- -- -
  ------ ---------- -------------- ---
-

--------------------- - ----- ------------ -- --
  -------- --------------------------------
---

------ ------- -------------------------------------------------------

上述代码中,我们首先将 i18nProviderappWithTranslation 进行封装,然后向 MyApp 组件传递 i18n 对象。

创建语言文件

我们为每种语言创建一个独立的 JSON 文件,并放在 locales 目录下。每个文件都应该具有与默认语言相同的键。例如,对于英语文件可以写成这样:

对于德语文件可以写成这样:

页面中使用

通过 withTranslation 高阶组件,可以将多语言内容传递给 React 组件。例如,在下面示例中,我们在 MyComponent 组件中使用 t 方法从语言文件中获取值:

-- -------------------- ---- -------
------ ----- ---- --------
------ - --------------- - ---- ---------------

-------- ------------- - -- -
  ------ -
    -----
      ----------------------
      -----
        ----
          ------------------------
          ------------------------
          ---------------------------
        -----
      ------
    ------
  -
-

------ ------- ---------------------------------------

我们在 withTranslation 方法中传入 'common',这告诉 withTranslation 使用我们之前创建的 common.json 文件。在 MyComponent 组件中,我们使用 t 方法来获取语言文件中的文本。

总结

在本文中,我们详细介绍了在 Next.js 中使用 i18n 的实现方式,这对于构建具有多语言支持的网站非常重要。从安装、初始化到页面中使用,我们解释了如何在 Next.js 中实现 i18n。虽然这只是一个基本例子,但是相信它可以帮助您快速开始使用 i18n,并在以后发展您的应用程序时进行适当的扩展。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64d44bf9b5eee0b525bd4421

纠错
反馈