Vercel部署的NextJS本地化URL重写生产环境异常

• Vercel生产环境路由逻辑与本地差异：本地开发服务器实时解析rewrites规则，但Vercel部署时，若页面为静态生成，未预渲染本地化URL对应的静态资源，或rewrites规则未被正确映射到生产环境路由系统。
• Shallow routing的客户端局限性：shallow routing仅在客户端更新URL，不触发服务器端路由匹配或数据获取逻辑。刷新页面时，服务器直接请求本地化URL，因无对应预渲染文件或路由映射，返回404。
• Rewrites规则配置缺陷：针对列表页的本地化重写规则可能存在优先级问题，或未覆盖分页路径的所有情况，导致生产环境服务器无法正确解析请求到原页面。
• getInitialProps的兼容性问题：getInitialProps在服务器端执行时，未正确解析本地化URL对应的原路由，导致数据获取失败或路由匹配失效。

1. 完善rewrites配置，覆盖所有路径场景 #

确保next.config.js中的rewrites规则包含列表页及分页的所有本地化路径，同时结合i18n配置：

module.exports = {
  i18n: {
    locales: ['en', 'hu', 'de', 'fr', 'it'],
    defaultLocale: 'en',
  },
  async rewrites() {
    return [
      // 匹配带分页参数的本地化列表页
      {
        source: '/:lang/esettanulmanyok/:page(\\d+)',
        destination: '/:lang/customer-stories/:page',
      },
      // 匹配基础本地化列表页
      {
        source: '/:lang/esettanulmanyok',
        destination: '/:lang/customer-stories',
      },
      // 其他语言的对应规则（示例）
      {
        source: '/:lang/erfolgsgeschichten/:page(\\d+)',
        destination: '/:lang/customer-stories/:page',
      },
      {
        source: '/:lang/erfolgsgeschichten',
        destination: '/:lang/customer-stories',
      },
    ];
  },
};

2. 替换getInitialProps为推荐的数据获取方法 #

getInitialProps已被Next.js官方弃用，改用getServerSideProps或getStaticProps适配服务器端路由解析：

使用getServerSideProps（服务器端渲染） #

export async function getServerSideProps(context) {
  const { locale, params } = context;
  const page = params.page ? parseInt(params.page) : 1;
  // 根据locale和page获取对应数据
  const customerStories = await fetch(`/api/customer-stories?locale=${locale}&page=${page}`).then(res => res.json());
  
  return {
    props: { customerStories, locale },
  };
}

使用getStaticProps（静态生成+增量再生） #

export async function getStaticProps({ locale }) {
  const customerStories = await fetch(`/api/customer-stories?locale=${locale}`).then(res => res.json());
  
  return {
    props: { customerStories, locale },
    revalidate: 3600, // 每小时增量更新
  };
}

export async function getStaticPaths({ locales }) {
  // 预生成所有语言的基础路径，分页路径由fallback处理
  const paths = locales.map(locale => ({
    params: {},
    locale,
  }));
  return { paths, fallback: true };
}

3. 调整shallow routing逻辑 #

若必须使用shallow routing，确保跳转的URL在服务器端有对应的rewrites规则，或改用非shallow的路由跳转：

import { useRouter } from 'next/router';

const handlePageChange = (page) => {
  const router = useRouter();
  // 替换为本地化路径，确保rewrites规则能匹配
  const localizedPath = `/hu/esettanulmanyok/${page}`;
  // 不使用shallow，确保服务器端能解析
  router.push(localizedPath, undefined, { shallow: false });
};

4. 检查Vercel部署配置 #

• 确保Vercel项目未在vercel.json中配置冲突的路由规则，优先使用next.config.js的rewrites配置。
• 若为静态导出，需确保next.config.js中添加output: 'export'，并验证rewrites是否被正确转换为静态路由映射。

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