Next.js 13.5.2中Next Link组件与Rewrite的Vercel部署异常问题

针对你遇到的Next.js 13.5.2在Vercel部署后，使用Link组件访问rewrite路由时核心内容缺失的问题，以下是针对性的排查和解决步骤：

1. 检查rewrites配置的正确性 #

确保next.config.js中的rewrites规则参数传递和匹配逻辑无误：

• 确认rewrites的source和destination规则包含完整的参数通配符，比如：

  module.exports = {
    async rewrites() {
      return [
        {
          source: '/artiklar/:id*',
          destination: '/articles/:id*',
        },
      ];
    },
  };
  

  避免因参数传递不完整导致页面无法获取[id]参数。
• 如果项目启用了多语言locale功能，检查rewrites是否设置了locale: false，防止Next.js内置的locale路由与自定义rewrite规则冲突：

  {
    source: '/artiklar/:id*',
    destination: '/articles/:id*',
    locale: false, // 禁用该路由的locale自动处理
  }
  

2. 验证页面数据获取逻辑 #

如果页面使用getServerSideProps或getStaticProps（Pages Router），确保参数获取逻辑不依赖原始URL解析：

• 在getServerSideProps中，直接使用context.params.id获取参数，而非手动解析req.url：

  export async function getServerSideProps(context) {
    const { id } = context.params;
    // 基于id获取数据
    const data = await fetchArticle(id);
    return { props: { article: data } };
  }
  

• 若使用静态生成（getStaticProps），检查fallback配置是否为true或'blocking'，确保动态路由能在客户端跳转时正确生成页面内容。

3. 调整Next Link组件的使用方式 #

• 确保Link的href直接使用rewrite后的路径（如/artiklar/123），避免混用原始路径；同时添加passHref属性确保路由上下文正确传递：

  import Link from 'next/link';
  
  // 正确写法
  <Link href="/artiklar/123" passHref>
    <a>查看文章</a>
  </Link>
  

• 移除Link组件上的as属性（若存在），Next.js 13.5+中as属性的使用逻辑已调整，与rewrites规则共存时易引发路由匹配冲突。

4. 清理Vercel部署缓存并重新部署 #

Vercel的旧缓存可能导致新的rewrite规则未生效：

1. 进入Vercel控制台的项目部署页面
2. 点击「Redeploy」按钮，勾选「Clear build cache」选项后重新部署

5. 调试客户端路由错误 #

打开浏览器控制台排查客户端渲染时的异常：

• 查看是否有数据请求失败、组件渲染报错等信息，定位内容缺失的直接原因
• 在_app.jsx中添加路由事件监听，确认路由跳转后页面是否正确触发数据加载：

  import { useRouter } from 'next/router';
  
  function MyApp({ Component, pageProps }) {
    const router = useRouter();
  
    router.events.on('routeChangeComplete', (url) => {
      console.log('当前路由:', url);
      // 可在此处检查页面数据是否已正确加载
    });
  
    return <Component {...pageProps} />;
  }
  
  export default MyApp;
  

6. 尝试调整Next.js版本 #

若上述步骤无效，暂时降级到Next.js 13.5.1或升级至最新稳定版，确认是否为13.5.2版本的特定路由bug。

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