部署Vercel后next-i18next搭配getServerSideProps的动态页面返回404如何解决

排查步骤 #

• 核对Vercel项目的构建命令，确认和本地生产构建命令完全一致，无遗漏next-i18next相关的前置处理逻辑
• 检查项目根目录的next.config.js与next-i18next.config.js配置，确认i18n的locale列表、默认locale配置正确，没有和动态路由冲突的重写/重定向规则
• 查看Vercel部署的构建阶段日志，排查是否有动态路由生成失败、翻译文件读取失败的报错信息
• 查看Vercel的函数运行日志，确认SSR路由的getServerSideProps执行过程中是否有运行时异常

常见修复方案 #

1. 修正翻译文件读取路径 #

90%以上的同类问题都是因为serverSideTranslations在Vercel生产环境无法正确读取翻译文件导致执行失败，返回404。需要将next-i18next.config.js中的localePath配置为绝对路径：

// next-i18next.config.js
const path = require('path');

module.exports = {
  i18n: {
    defaultLocale: 'zh', // 替换为你的默认语言
    locales: ['zh', 'en'], // 替换为你的支持语言列表
  },
  // 关键配置：用绝对路径指定翻译文件位置
  localePath: path.resolve('./public/locales'),
};

同时确认next.config.js已经正确引入了i18n配置：

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

module.exports = {
  i18n,
  // 其余原有配置保留
};

2. 统一Node.js运行版本 #

如果本地开发的Node.js版本和Vercel默认运行的Node.js版本不一致，也可能导致文件读取逻辑异常。可以在Vercel项目设置的「Node.js Version」板块，将版本修改为和本地开发完全一致的版本。

3. 添加异常兜底逻辑 #

在getServerSideProps中添加异常捕获，避免翻译加载失败直接返回404：

export const getServerSideProps = async ({ locale }) => {
  try {
    return {
      props: {
        ...(await serverSideTranslations(locale, ['home', 'common']))
      }
    }
  } catch (error) {
    // 加载失败时兜底返回默认语言的翻译
    return {
      props: {
        ...(await serverSideTranslations('zh', ['home', 'common']))
      }
    }
  }
};

4. 修正路由路径规则 #

如果next.config.js中开启了trailingSlash: true，访问动态路由时如果路径尾部不带斜杠会触发404，可以统一访问路径规则，或者关闭该配置。

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