Next.js 13 appDir 国际化路由：开箱即用的解决方案

闲谈

2023-09-17 03:00:08

使用 Next.js 13 的 appDir 特性实现国际化路由：详细指南

什么是 Next.js 中的国际化路由？

国际化路由使你的应用能够根据用户选择的语言显示不同语言版本的页面。这是多语言应用的关键功能，可为用户提供更好的体验。

为什么 Next.js 原生不支持国际化路由？

虽然 Next.js 是一个强大的前端框架，但它目前还没有开箱即用的国际化路由支持。这是因为 Next.js 使用基于文件的路由系统，不方便处理不同语言版本的页面。

如何使用 appDir 特性实现国际化路由？

Next.js 13 中的 appDir 特性允许我们解决这个问题。它使我们能够使用与 Next.js 默认目录结构不同的自定义目录结构。我们可以利用这一点来实现国际化路由。

步骤 1：安装必要的软件包

npm install next-app-dir-i18n

步骤 2：配置 next.config.js 文件

const withAppDirI18n = require('next-app-dir-i18n');

module.exports = withAppDirI18n({
  i18n: {
    locales: ['en', 'zh'],
    defaultLocale: 'en',
  },
});

步骤 3：创建语言文件

创建 i18n 目录并添加语言文件，例如：

i18n/en.json
{
  "hello": "Hello, world!"
}

i18n/zh.json
{
  "hello": "你好，世界！"
}

步骤 4：使用 useTranslation hook

在你的页面中，使用 useTranslation hook 获取当前语言的翻译内容：

import { useTranslation } from 'react-i18next';

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

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

export default Home;

示例代码

以下是实现国际化路由的一个示例代码段：

import { useTranslation } from 'react-i18next';
import { useRouter } from 'next/router';

const Header = () => {
  const { t } = useTranslation();
  const router = useRouter();

  return (
    <header>
      <h1>{t('welcome')}</h1>
      <div>
        <a href={router.asPath.replace('/en', '/zh')}>中文</a>
        <a href={router.asPath.replace('/zh', '/en')}>English</a>
      </div>
    </header>
  );
};

export default Header;