Next.js 应用程序如何使用本地化和国际化-JavaScript中文网-JavaScript教程资源分享门户

在现今全球化的时代，多语言支持是一个非常关键的需求。在 web 开发中，本地化和国际化是两个常见的概念。本地化是指将应用程序适应不同的语言和地区，而国际化则是指将应用程序设计为可以方便地本地化。

如果您正在使用 Next.js 开发应用程序，并且需要支持本地化和国际化，请继续阅读本文。我们将为您提供详细的说明，并提供示例代码以供参考。

安装 i18next

i18next 是一个流行的国际化库，为 Next.js 应用程序提供了一些方便的工具。您可以通过 NPM 或 Yarn 安装它：

npm install i18next react-i18next

或者

yarn add i18next react-i18next

设置 i18next

首先，在 pages 目录下创建一个 _app.js 文件。这是 Next.js 应用程序的根组件，用于在整个应用程序中保持状态。将以下代码添加到 _app.js 文件的顶部：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

然后，将以下代码添加到 _app.js 文件的根组件（通常是 App 组件）中：

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default appWithTranslation(MyApp);

这将使整个应用程序具备本地化和国际化的能力。

创建翻译文件

在应用程序的 public/static/locales 目录下创建一个新目录，例如 en。在该目录下创建一个名为 translation.json 的文件，并用以下内容填充：

{
  "welcome": "Welcome",
  "title": "Next.js Application"
}

创建一个名为 fr 的新目录，并在其中创建一个 translation.json 文件。将以下内容添加到该文件：

{
  "welcome": "Bienvenue",
  "title": "Application Next.js"
}

您可以创建任意数量的翻译文件。每个目录表示一种语言或地区。每个目录中应包含一个 translation.json 文件，其中定义了相同的键，但使用不同的翻译。

在组件中使用翻译

在组件中使用 useTranslation 钩子来获取需要翻译的文本。例如，以下代码显示了如何在 Home 组件中使用 useTranslation 钩子：

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

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

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

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

在这个例子中，t 函数接受一个键，并返回该键的翻译文本。当应用程序的语言环境改变时，i18next 将自动更新翻译。

切换语言

要在应用程序中切换语言，您可以使用 useTranslation 钩子中的 i18n 对象。下面是一个将应用程序切换到法语的示例：

function changeLanguage(lang) {
  i18n.changeLanguage(lang);
}

<button onClick={() => changeLanguage('fr')}>French</button>

在此示例中，单击按钮将应用程序的语言环境更改为法语。

结论

在本文中，我们介绍了如何在 Next.js 应用程序中使用 i18next ，实现本地化和国际化功能并提供了示例代码。如果您正在创建一个多语言网站或应用程序，我们希望这篇文章能为您提供一些帮助。

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