Next.js 搭建多语言站点的两种实现方式-JavaScript中文网-JavaScript教程资源分享门户

本文主要介绍 Next.js 中实现多语言站点的方法，我们将介绍两种不同的实现方式，并给出代码示例。每种方法都有其不同的优缺点，读完本文后，您将能够选择最适合您需求的方法。

方法一：客户端渲染

第一种方法是使用客户端渲染，这种方法对 SEO 不太友好，但对于页面即时性和实时性要求较高的站点非常有用。这种方法可以使用 React 的 Context API 来实现整个应用程序的多语言支持。

首先，我们可以创建一个名为LangContext的上下文对象，用来存储应用程序的当前语言：

import React from 'react';

const LangContext = React.createContext();

export default LangContext;

然后创建一个名为LangProvider的组件，用于更新当前语言并在整个应用程序中共享当前语言：

import React, { useState } from 'react';
import LangContext from './LangContext';

const LangProvider = ({ children }) => {
  const [lang, setLang] = useState('en'); // 默认语言为英语
  const changeLang = lang => setLang(lang);

  const value = {
    lang,
    changeLang,
  };

  return (
    <LangContext.Provider value={value}>
      {children}
    </LangContext.Provider>
  );
};

export default LangProvider;

现在，可以将LangProvider放在_app.js文件中，这将使整个应用程序使用相同的语言：

import React from 'react';
import App from 'next/app';
import LangProvider from '../components/LangProvider';

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;

    return (
      <LangProvider>
        <Component {...pageProps} />
      </LangProvider>
    );
  }
}

export default MyApp;

通过将组件包装在LangContext.Provider内，可以将lang和changeLang值传递给所有子组件。现在，可以在应用程序中使用LangContext来获取当前语言，并在需要的地方更新它。

示例代码:

import React, { useContext } from 'react';
import LangContext from './LangContext';

const LangSwitcher = () => {
  const { lang, changeLang } = useContext(LangContext);

  const handleLangChange = event => {
    event.preventDefault();
    changeLang(event.target.value);
  };

  return (
    <div>
      <button value="en" onClick={handleLangChange} disabled={lang === 'en'}>
        English
      </button>
      <button value="zh" onClick={handleLangChange} disabled={lang === 'zh'}>
        中文
      </button>
    </div>
  );
};

export default LangSwitcher;

在上面的示例代码中，我们在组件中引入了useContext钩子，这是 React 16.8 之后添加的新功能，用于方便地使用 Context。我们在组件中获取了当前语言以及更改当前语言的函数，并将它们用于渲染语言切换器。在handleLangChange函数中，我们使用changeLang函数设置新的语言。

方法二: 服务器端渲染

第二种方法是使用服务器端渲染（SSR），这种方法对 SEO 友好，但不够灵活。这种方法将一整个页面渲染成 HTML，并在服务器上提供静态版本的页面。这种方法使用的是next-i18next插件，它可以很容易地将多语言支持应用于 Next.js 应用程序。

首先，我们需要安装next-i18next插件：

npm install next-i18next

next-i18next将创建一个叫做i18n.js的配置文件，该配置文件指定有哪些语言可用以及如何翻译文本。在我们的示例中，我们将创建一个包含两种语言的应用程序，英语和中文，内容如下：

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

module.exports = new NextI18Next({
  defaultLanguage: 'en',
  otherLanguages: ['zh'],
  localeSubpaths: {
    en: 'en',
    zh: 'zh',
  },
});

在上面的示例代码中，我们将英语设为默认语言，并指定另一种语言zh。localeSubpaths指定了使用哪个 URL 子路径来呈现给定语言的版本。

现在，我们需要在 Next.js 应用程序中使用next-i18next，将多语言支持应用于组件。

首先，在next.config.js文件中，我们需要设置一个localePath配置项：

// next.config.js
module.exports = {
  i18n: {
    locales: ['en', 'zh'],
    defaultLocale: 'en',
  },
  localePath: 'public/static/locales',
};

接下来，在组件中使用useTranslation将多语言支持应用于组件：

import { withTranslation } from "../../i18n";

const Home = ({ t }) => <div>{t("greeting")}</div>;

export default withTranslation("common")(Home);

在上面的示例代码中，我们将Home组件传递给了withTranslation高阶组件。高阶组件会将一个i18n对象和一个t函数作为props传递给子组件。

现在，我们可以在组件中使用t函数将某些文本翻译成当前语言。

总结

本文介绍了两种使用 Next.js 应用程序实现多语言站点的方法。需要注意的是，两种方法都不能答谢同一个网页内容有多个语言版本的情况。因此，在选择实现多语言的方法时，需要考虑应用程序的需求和具体场景。

希望这篇文章能够对您有所启发，如果您有其他关于 Next.js 的问题或需求，请阅读 Next.js 的官方文档或者发布您的问题到 Next.js 的官方论坛，让大家一起帮您解决问题。

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

Next.js 搭建多语言站点的两种实现方式

方法一：客户端渲染

方法二: 服务器端渲染

总结

纠错反馈