如何在 Next.js 应用程序中处理多语言-JavaScript中文网-JavaScript教程资源分享门户

如何在 Next.js 应用程序中处理多语言？

在现代的全球化时代中，多语言已经成为了一个必须考虑的问题。而对于前端领域而言，我们需要在应用程序中处理多语言。本篇文章将介绍如何在 Next.js 应用程序中处理多语言。

Next.js 是一个 React 框架，其最大的特点是服务端渲染。Next.js 的服务端渲染让我们可以在浏览器还未开始执行 JavaScript 代码之前以渲染好的 HTML 形式呈现页面，从而提高了首屏渲染速度，加强了搜索引擎优化，并且有助于更好的用户体验。

基于 Next.js 的服务端渲染，我们可以很容易地实现多语言功能。下面是具体的实现步骤：

安装 i18n 模块

i18n 模块是一个处理多语言的 JavaScript 框架，它提供了多种方式来实现国际化。

我们可以通过 npm 安装该模块：

npm install --save i18n

创建多语言配置文件

在项目根目录下创建一个名为 i18n.js 的文件，用于管理多语言的配置信息。

该文件的代码如下：

// javascriptcn.com 代码示例
const i18n = require('i18n');

i18n.configure({
  locales: ['en', 'zh'],
  directory: `${__dirname}/locales`,
  defaultLocale: 'en',
  cookie: 'locale'
});

module.exports = i18n;

我们在其中进行了设置：

locales: 设置需要支持的语言列表
directory: 存放各语言翻译文件的目录
defaultLocale: 默认语言
cookie: 支持通过 cookie 来更改语言的名称

创建多语言翻译文件

在 i18n.js 文件中设置好多语言的信息之后，我们需要在 locales 目录下为每一种语言创建一个翻译文件。

例如，我们创建了两个翻译文件：

locales/en.json

{
  "welcome": "Welcome"
}

locales/zh.json

{
  "welcome": "欢迎"
}

以上是两种语言的欢迎语。

封装 i18n 功能

在上一步，我们已经为各种语言创建了翻译文件，接下来我们即将会封装一个 i18n 语言环境的功能组件。

在 pages 目录下新建一个 _app.js 文件，它是所有页面共用的顶层组件，我们在该组件中对 i18n 功能进行封装：

// javascriptcn.com 代码示例
import App from 'next/app';
import i18n from '../i18n/i18n';
import { I18nextProvider } from 'react-i18next';

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    return (
      <I18nextProvider i18n={i18n}>
        <Component {...pageProps} />
      </I18nextProvider>
    );
  }
}

export default MyApp;

我们在这里使用了 i18n 模块提供的 I18nextProvider 组件。这个组件的作用是在所有下级组件中提供一个翻译的环境变量。

使用上面的代码，我们就可以在所有页面组件中使用翻译功能了。

在页面组件中使用 i18n 功能

我们对 _app.js 进行了封装操作，其目的是使得在页面组件(Container)中简洁地使用 i18n 功能。

例如，在 pages 目录下创建一个名为 index.js 的文件，该文件就是我们的首页面（最初访问的页面），下面的代码就是用来展示多语言切换功能的实例：

// javascriptcn.com 代码示例
import React, { Component } from 'react';
import { withTranslation } from 'react-i18next';

class Container extends Component {
  handleClick(lang) {
    const { i18n } = this.props;
    i18n.changeLanguage(lang);
  }

  render() {
    const { t } = this.props;
    return (
      <div>
        <button onClick={() => this.handleClick('en')}>English</button>
        <button onClick={() => this.handleClick('zh')}>中文</button>
        <div>{t('welcome')}</div>
      </div>
    );
  }
}

export default withTranslation()(Container);

上述代码中，我们使用了 withTranslation 高阶组件，通过这个高阶组件，我们在 Container 组件中便可以直接使用 t 函数来进行国际化处理，该函数的作用是获取当前语言环境下指定字符串对应的翻译值。

操作流程：

在初始状态下，页面应该是英文状态，所以首先我们在页面中展示了一个 button，用于选择中文语言。
当我们点击按钮后，changeLanguage 方法会将语言环境设置为中文，再次点击则会将语言环境设置回英文。这样便提供了切换语言的功能。
然后我们在 div 中展示了 welcome 字符串的翻译结果，根据当前语言环境来决定翻译展示情况。

这个功能组件依托的是 i18n，如果说我们需要更加丰富的多语言处理能力，则可以在其基础上进行扩展。

总结：

在 Next.js 应用程序中处理多语言是一个比较复杂的抽象功能，但也是一种值得学习的良好实践。在这个过程中，我们应该采取一种抽象思维，来将应用程序中的多语言分装成为一个统一管理的模块，并且之后优化压缩即可达到更为美妙的结果，希望本篇文章能对读者有所指导和启示。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652cd5007d4982a6ebe628fd