面试题：Next.js Link组件结合国际化实现复杂多语言导航逻辑

1. 路由配置

在 Next.js 中，可以使用 next - i18next 库来处理多语言路由。首先安装依赖：

npm install next - i18next i18next

在项目根目录创建 next - config.js 文件，配置如下：

const { i18n } = require('./next - i18next.config');

module.exports = {
  i18n,
  trailingSlash: true,
  async rewrites() {
    return [
      {
        source: '/:locale/product - list',
        destination: '/:locale/产品列表'
      }
    ];
  }
};

在 next - i18next.config.js 文件中配置多语言：

module.exports = {
  i18n: {
    locales: ['zh', 'en', 'ja'],
    defaultLocale: 'zh',
    localeDetection: false
  }
};

2. Link 组件的使用

在页面中使用 Link 组件时，需要根据当前语言动态生成正确的链接。例如在导航栏组件中：

import Link from 'next/link';
import { useRouter } from 'next/router';

const Navbar = () => {
  const router = useRouter();
  const { locale } = router;

  const getLink = (path) => {
    if (locale === 'en') {
      if (path === '/产品列表') {
        return '/product - list';
      }
      // 其他英文路径处理
    }
    // 其他语言路径处理
    return path;
  };

  return (
    <nav>
      <ul>
        <li>
          <Link href={getLink('/产品列表')}>
            <a>产品列表</a>
          </Link>
        </li>
        {/* 其他导航项 */}
      </ul>
    </nav>
  );
};

export default Navbar;

3. 语言切换逻辑

可以创建一个语言切换组件来处理语言切换逻辑，利用 next - i18next 提供的 useTranslation 和 useRouter 钩子：

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

const LanguageSwitcher = () => {
  const { t } = useTranslation();
  const router = useRouter();
  const { locale } = router;
  const setLanguage = useSetI18nLanguage();

  const handleLanguageChange = (newLocale) => {
    const currentPath = router.asPath;
    setLanguage(newLocale).then(() => {
      const newPath = currentPath.replace(`/${locale}`, `/${newLocale}`);
      router.push(newPath);
    });
  };

  return (
    <div>
      <button onClick={() => handleLanguageChange('zh')}>中文</button>
      <button onClick={() => handleLanguageChange('en')}>英文</button>
      <button onClick={() => handleLanguageChange('ja')}>日文</button>
    </div>
  );
};

export default LanguageSwitcher;

以上代码通过 next - i18next 库实现了多语言路由配置，在 Link 组件中根据语言生成正确链接，并通过 LanguageSwitcher 组件实现了语言切换时保持当前页面状态并切换到对应语言版本页面的功能。

面试题：Next.js Link组件结合国际化实现复杂多语言导航逻辑

知识考点

面试题答案

1. 路由配置

2. Link 组件的使用

3. 语言切换逻辑