问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vercel 部署 next 项目刷新 404 ？

头像
CWL
    1091029

    vercel 部署 next 项目刷新 404，知道因为是 spa 应用，刷新后向后端请求没有对应资源所以 404 了，但是不知道怎么在 vercel 上解决，之前只配过 nginx 的解决方法。
    看掘金有个 https://juejin.cn/post/7278868533877620796 解决方案发现不起作用。刷新后页面变成了 Index.html 的首页，但是我还是想停留在当前页面，求助！！！！！！

    项目源码：https://github.com/chenwll/blog

    之前使用的Framework Settings 是 next.js，但是部署过程中会报错
    image.png

    然后将Framework Settings 换成了others，但是存在刷新 404 问题
    image.png

    前端vercelnext.js
    阅读 928
    avatarAI BotBETA

    问题原因：
    Next.js 静态导出（next export）生成的纯 SPA 应用在 Vercel 上刷新时，Vercel 的 Serverless 架构会尝试寻找对应的物理文件路径，若不存在则返回 404。

    解决方案：

    1. 正确配置 vercel.json
      在项目根目录创建文件：

      {
  "routes": [
 { "handle": "filesystem" },
 { "src": "/(.*)", "dest": "/index.html" }
  ]
}
    2. "handle": "filesystem" 优先匹配真实存在的静态资源（CSS/JS/图片等）
    3. 通配路由 /(.*) 将所有页面请求重定向到 index.html

    4. 检查 Next.js 配置
      确保 next.config.js 已开启静态导出：

      module.exports = {
  output: 'export', // 关键配置
  trailingSlash: true, // 可选：解决路径末尾斜杠问题
}
    5. 部署设置验证
      在 Vercel 控制台检查：
    6. 构建命令应为 next build && next export
    7. 输出目录应为 out（默认生成目录）

    8. 添加自定义 404 页面（可选）
      创建 pages/404.js：

      import { useRouter } from 'next/router'

export default function Custom404() {
  const router = useRouter()
  
  // 可根据需求添加自动重定向逻辑
  return <h1>404 - {router.asPath} 不存在</h1>
}

    常见问题排查：

    1. 确保没有使用 getServerSideProps 等 SSR 特性（与静态导出冲突）
    2. 动态路由需要预先生成路径（通过 generateStaticParams）
    3. 部署后清除 Vercel 部署缓存重新构建
    4. 访问路径需保持与 Next.js 路由规则一致（区分大小写）
    1 个回答
    得票最新
    头像
    Meathill
      22.5k133642

      理论上 Vercel 上部署 SPA 已经非常成熟了，不应该有问题，你可以试着改一下预设方案。或者贴一下项目源码，否则不好判断。

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题