ReactJS与Next.js集成WordPress后页面刷新404问题求助

嘿，这问题我之前也碰到过！咱们先把根因理清楚：

你直接跑node server.js时一切正常，是因为用的是你自己配置的Express服务器，里面肯定已经加了单页应用的路由 fallback 逻辑——也就是把所有非API请求都交给Next.js处理，所以刷新页面时服务器能正确找到对应页面。

但next start -p 80是Next.js官方的默认生产启动命令，它只会启动Next.js内置的服务器，完全不会加载你的server.js文件，自然就没有你配置的路由兜底逻辑，这就是刷新后跳404的核心原因。

具体解决方案 #

1. 修改启动脚本，用自定义服务器启动生产环境

打开你的package.json，把原来的start脚本换掉：

• 如果你用Linux/macOS：

  "start": "NODE_ENV=production node server.js"
  

• 如果你用Windows：

  "start": "set NODE_ENV=production && node server.js"
  

这样执行npm run start时，就会启动你的自定义Express服务器，而不是Next.js默认的服务器。

2. 确保server.js的路由兜底逻辑正确

检查你的server.js里有没有类似这样的关键代码段：

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

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

  // 这里可以放你的自定义API路由或其他中间件

  // 核心：所有非API请求都交给Next.js处理
  server.all('*', (req, res) => {
    return handle(req, res);
  });

  server.listen(80, (err) => {
    if (err) throw err;
    console.log('> 生产服务器已启动在 http://localhost:80');
  });
});

其中server.all('*', ...)是关键，它会把所有请求都转发给Next.js的请求处理器，确保客户端路由刷新时能正确返回对应页面。

3. 按正确流程构建启动

先执行构建命令生成生产包：

next build

再启动服务器：

npm run start

额外补充 #

如果不想用自定义服务器，也可以试试Next.js的静态生成方案——在页面的getStaticPaths里设置fallback: true，但这种方式更适合纯静态站点。如果你的项目需要Express中间件、自定义API路由这类功能，用自定义服务器是更稳妥的选择。

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