Vercel部署的NextJS应用导航至根路由时触发页面重载问题

问题详情 #

• 部署环境：Vercel上的Next.js应用，采用新版app目录与RSC组件
• 核心症状：导航至根路由/时触发页面重载，非根路由间跳转无此问题；本地运行正常，仅Vercel部署环境出现
• 导航实现：基于next/link的Link组件封装了NavbarLink，所有导航栏链接（/、/posts、/projects）均使用该组件
• 关联线索：网络面板显示根路由/存在404请求，可能与重载问题相关

已尝试的解决方法 #

• 改用useRouter.push替代Link组件
• 将app目录从src/app移至根目录app
• 在导航栏和页脚外使用Link组件
• 升级至NextJS 13.3.x版本
• 调整next.config配置

排查与解决方向 #

1. 检查根路由页面组件导出规范 #

确认app/page.js（或page.tsx）是否正确导出默认组件，且RSC组件的导出逻辑符合Next.js要求。避免在根路由页面中混合使用客户端组件与服务器组件时出现冲突，比如未正确标记'use client'指令。

2. 验证Vercel部署配置与缓存 #

• 查看Vercel项目构建日志，确认无构建报错
• 清空Vercel的构建缓存后重新部署，排除缓存导致的页面资源异常

3. 定位根路由404请求的来源 #

检查app/layout.js或根路由页面中是否引用了路径错误的资源，比如静态文件、API请求路径错误，这类错误可能触发404并间接导致页面重载。

4. 检查NavbarLink封装逻辑 #

查看NavbarLink的代码实现，确认：

• href属性是否正确传递给底层的Link组件
• 未在自定义点击事件中误阻止默认行为失败，比如未调用e.preventDefault()导致浏览器触发默认跳转

5. 调整静态生成配置 #

若根路由使用静态生成，检查revalidate参数设置是否合理。Vercel部署时静态页面生成延迟可能导致首次访问出现404，进而触发页面重载。

临时应急方案 #

• 给根路由的Link组件添加prefetch={false}属性，禁用预加载，避免预请求触发的404导致重载
• 调整next.config.js中的trailingSlash配置（设为true或false）后重新部署，验证是否影响根路由跳转行为

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