在Next.js 14 Page Router中添加I18n后出现404错误求助

核心原因 #

当你配置了locales和defaultLocale但未正确处理根路径路由映射时，访问/（主页）不会自动匹配到默认locale的主页路由，导致Next.js找不到对应页面触发404；而带locale前缀的链接（如/en-US/about-us）能正常匹配到pages/about-us.js对应的本地化路由，所以可以正常访问。

可行解决方案 #

1. 完善next.config.js配置并确保主页路由存在 #

在next.config.js中显式启用locale自动检测（默认已开启，显式配置更稳妥），同时确保pages目录下存在index.js/index.tsx作为主页入口文件：

module.exports = {
  i18n: {
    locales: ['en-US', 'es-ES'],
    defaultLocale: 'en-US',
    localeDetection: true,
  },
}

pages/index.js会自动映射到/en-US和/es-ES两个本地化主页，开启localeDetection后，访问/会根据用户浏览器语言自动重定向到对应locale的主页，若浏览器语言不在配置列表中则跳转到defaultLocale的主页。

2. 手动添加根路径重定向逻辑 #

如果自动检测无效，可在pages/_app.js中手动处理根路径的重定向：

import { useRouter } from 'next/router'
import { useEffect } from 'react'

function MyApp({ Component, pageProps }) {
  const router = useRouter()

  useEffect(() => {
    // 根路径且无locale参数时，强制跳转到默认locale主页
    if (router.pathname === '/' && !router.locale) {
      router.replace('/en-US')
    }
  }, [router])

  return <Component {...pageProps} />
}

export default MyApp

3. 排查冲突配置 #

• 检查next.config.js中是否存在自定义rewrites/redirects规则，避免这些规则干扰根路径的路由匹配；
• 确认未错误设置basePath，该配置会改变路由的基础前缀，导致根路径匹配异常。

内容的提问来源于stack exchange，提问作者Đỗ Duy Đoàn