nextjs13/14国际化从入门到精通

2022-11-30 01:08:04

Next.js 13/14 国际化：轻松实现多语言网站

序言：

在当今全球化的数字世界中，多语言网站对于接触广泛受众和扩展业务至新市场的企业而言至关重要。Next.js，一个流行的 React 框架，通过其直观的 API 和强大的功能，为构建国际化应用程序提供了无缝的解决方案。在这篇全面的指南中，我们将深入探讨 Next.js 13/14 的国际化特性，指导您逐步创建多语言网站。

准备工作：

1.1 安装依赖项

要开始使用 Next.js 的国际化功能，您需要安装 next-translate 包：

npm install next-translate

1.2 配置 i18n.json

在项目根目录下创建名为 i18n.json 的文件，并指定默认语言和支持的语言列表：

{
  "defaultLanguage": "en",
  "languages": ["en", "es"]
}

创建语言文件：

在 /public/locales 目录下创建相应的语言文件，例如 en.json 和 es.json，并提供翻译的文本：

// en.json
{
  "hello": "Hello"
}

// es.json
{
  "hello": "Hola"
}

使用翻译函数：

在组件中，使用 useTranslation 钩子访问翻译函数 t，然后使用它来翻译文本：

import { useTranslation } from "next-translate";

const MyComponent = () => {
  const { t } = useTranslation();

  return (
    <h1>{t("hello")}</h1>
  );
};

路由国际化：

为了支持多语言路由，请在路由路径中包含语言前缀：

/en/about
/es/acerca-de

在 pages/ 目录下创建对应的页面，例如 pages/en/about.jsx 和 pages/es/acerca-de.jsx，并使用 useTranslation 钩子来翻译内容：

// pages/en/about.jsx
import { useTranslation } from "next-translate";

const About = () => {
  const { t } = useTranslation();

  return (
    <h1>{t("about")}</h1>
  );
};

export default About;

语言切换：

Next.js 提供了 Link 组件，用于实现语言切换，例如：

import Link from "next-translate/Link";

const LanguageSwitcher = () => {
  return (
    <ul>
      <li>
        <Link href="/en" lang="en">英语</Link>
      </li>
      <li>
        <Link href="/es" lang="es">西班牙语</Link>
      </li>
    </ul>
  );
};

export default LanguageSwitcher;