让你的 Next.js 应用支持多语言

Next.js 是一种流行的 React 框架，它提供了一种快速简便的方式来构建现代 web 应用程序。在开发全球化应用的同时，支持多语言是必不可少的。在本文中，我们将介绍如何使用 Next.js 实现多语言支持。

第一步：安装所需的依赖项

我们需要安装以下依赖项：

1. next-i18next - 用于在 Next.js 应用程序中实现多语言支持。
2. i18next - 用于在应用程序中管理翻译。
3. react-i18next - 用于在 React 组件中使用 i18next。

可以使用以下命令安装这些依赖项：

npm install next-i18next i18next react-i18next

第二步：设置 i18next 配置

我们需要创建一个 i18next 配置文件。在根目录下创建一个名为 i18n.js 的文件，并添加以下内容：

const NextI18Next = require('next-i18next').default;

module.exports = new NextI18Next({
  defaultLanguage: 'en',
  otherLanguages: ['fr', 'de'],
  localePath: 'public/locales',
});

• defaultLanguage：应用程序的默认语言。
• otherLanguages：其他支持的语言。
• localePath：翻译文件的存储位置。

第三步：创建翻译文件

在 public/locales 目录下创建一个名为 en.json 的文件，并添加以下内容：

{
  "hello": "Hello",
  "world": "World"
}

在 public/locales 目录下创建一个名为 fr.json 的文件，并添加以下内容：

{
  "hello": "Bonjour",
  "world": "le monde"
}

在 public/locales 目录下创建一个名为 de.json 的文件，并添加以下内容：

{
  "hello": "Hallo",
  "world": "Welt"
}

第四步：创建一个页面

在 pages 目录下创建一个名为 index.js 的文件，并添加以下内容：

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

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

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

• withTranslation：将 i18next 的 t 函数注入到组件中，以便在组件中使用翻译。

第五步：启动应用程序

现在，可以使用以下命令启动应用程序：

npm run dev

在浏览器中访问 http://localhost:3000，应该可以看到 "Hello World" 的输出。现在，可以通过更改 i18n.js 中的 defaultLanguage 和 otherLanguages 的值来更改默认语言和支持的语言。

结论

在本文中，我们介绍了如何使用 Next.js 实现多语言支持。通过使用 i18next 和 next-i18next，可以轻松地将多语言支持添加到 Next.js 应用程序中。希望这篇文章对您有所帮助，并且可以为您的下一个全球化应用程序提供支持。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6762311e856ee0c1d4fe2766