Next.js动态路由生产构建中刷新页面出现404 NotFound错误

一、静态导出（next export）场景 #

动态路由页面静态导出后不会生成对应HTML文件，浏览器刷新时直接请求服务器路径，服务器找不到文件导致404。解决方式：

• 在next.config.js中开启trailingSlash配置，让每个页面生成带/的目录及index.html，服务器可正确匹配：

  module.exports = {
    trailingSlash: true,
  }
  

• 或在服务器配置中添加 fallback 规则，让所有请求指向index.html，由Next.js客户端路由处理。

二、自定义Node.js服务器场景 #

自定义服务器未正确处理动态路由的 fallback，需让所有非静态资源请求交给Next.js处理。以Express为例：

const express = require('express')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  const server = express()

  // 所有请求交由Next.js处理
  server.all('*', (req, res) => {
    return handle(req, res)
  })

  server.listen(3000, (err) => {
    if (err) throw err
    console.log('> Ready on http://localhost:3000')
  })
})

三、Nginx服务器部署场景 #

Nginx默认会查找对应路径的文件，找不到则返回404，需配置转发规则：

location / {
  try_files $uri $uri/ /index.html;
}

此规则会让动态路由请求转发到index.html，由Next.js客户端路由接管。

四、Vercel官方平台部署场景 #

Vercel通常会自动处理动态路由，若仍出现问题：

• 项目根目录添加vercel.json配置路由重写：

  {
    "rewrites": [
      { "source": "/(.*)", "destination": "/" }
    ]
  }
  

• 检查动态路由文件命名是否正确，比如pages/posts/[id].js，确保格式无拼写错误。

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