Next.js中next-translate动态路由非默认Locale失效的修复咨询

以下是针对该问题的具体排查和修复步骤：

1. 检查next.config.js配置 #

确保已正确集成next-translate插件并配置多语言参数，示例配置如下：

const nextTranslate = require('next-translate-plugin')

module.exports = nextTranslate({
  i18n: {
    locales: ['ar', 'en'],
    defaultLocale: 'ar',
  },
})

避免手动设置localeDetection: false（除非有明确需求），否则可能导致路由解析逻辑异常。

2. 确认动态路由文件结构 #

动态路由文件需放在pages/post/[id].js（或.tsx）路径下，不要为每种语言单独创建子目录路由。next-translate会自动处理语言前缀的路由映射，无需重复编写路由文件。

3. 校验i18n.json配置 #

确保i18n.json中正确声明语言环境，且页面路由与翻译命名空间的映射无误：

{
  "locales": ["ar", "en"],
  "defaultLocale": "ar",
  "pages": {
    "*": ["common"],
    "/post/[id]": ["post"]
  }
}

其中"*"匹配所有页面，/post/[id]指定该动态路由对应的翻译命名空间。

4. 规范路由跳转方式 #

使用Next.js的Link组件或useRouter跳转时，需通过locale参数指定目标语言，不要手动拼接带语言前缀的URL：

// Link组件跳转示例
import Link from 'next/link'

<Link href="/post/1" locale="en">
  <a>查看英文文章1</a>
</Link>

// 编程式跳转示例
import { useRouter } from 'next/router'

const router = useRouter()
router.push('/post/1', undefined, { locale: 'en' })

5. 清除缓存并重新构建 #

• 开发环境：重启next dev服务，清除浏览器缓存
• 生产环境：重新执行next build和next start，避免旧缓存导致的路由解析错误

6. 生产环境服务器配置检查 #

若部署在非Vercel服务器（如Nginx），需确保服务器支持SPA路由解析，配置示例（Nginx）：

location / {
  try_files $uri $uri/ /index.html;
}

保证带语言前缀的动态路由能正确指向Next.js的入口文件。

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