Next.js如何通过可复用导航栏实现指定页面i18next多语言动态路由

直接在导航栏组件内增加多语言路由白名单校验逻辑即可，不需要拆分导航栏组件，也能从根源避免构建时生成无效路由报错。

核心逻辑 #

提前声明仅支持多语言切换的页面路径集合，渲染语言切换链接前先判断当前页面是否在允许范围内：

• 命中白名单（首页、关于页）：正常拼接语言前缀生成对应路由链接
• 未命中白名单：不生成带当前路径的语言前缀链接，可根据需求选择隐藏语言切换入口，或直接跳转对应语言的首页

实现代码 #

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

// 配置支持多语言的路由白名单，后续新增多语言页面直接往这里加路径即可
const ALLOWED_I18N_PATHS = new Set(['/', '/about']);

export default function NavBar() {
  const router = useRouter();
  const currentPath = router.route;
  const isSupportI18n = ALLOWED_I18N_PATHS.has(currentPath);

  return (
    <div className="nav-container">
      {/* 其余常规导航项逻辑保持原来的写法不变 */}
      
      {/* 语言切换区域 */}
      {isSupportI18n ? (
        <>
          <Link href={`/fr${currentPath}`}>French</Link>
          <Link href={`/es${currentPath}`}>Spanish</Link>
        </>
      ) : (
        // 非多语言页不需要语言入口就删掉下面这块，需要保留入口就直接跳转到对应语言首页
        <>
          <Link href="/fr">French</Link>
          <Link href="/es">Spanish</Link>
        </>
      )}
    </div>
  )
}

报错原因说明 #

next build 执行时会静态扫描所有Link标签的href属性，校验目标路由是否真实存在。之前的逻辑会在所有页面（比如未配置多语言的博客页、个人中心页）生成类似/fr/blog/xxx这类不存在的路由地址，直接触发构建错误。
加白名单判断后，仅在你实际配置了多语言路由的页面才会生成带前缀的合法链接，不会出现无效路由地址，构建自然可以正常通过。

如果后续要支持带动态参数的多语言页面，把白名单从Set改成正则匹配规则即可，维护成本很低，导航栏组件也可以保持全页面复用的特性，不需要拆分单独引入。

内容的提问来源于stack exchange，提问作者Mohammed Rehan