Next.js执行npm start时物理页面404，dev模式正常求助

最可能的核心原因：跳过了next build步骤 #

你遇到的问题大概率是因为直接运行npm start前没有执行npm run build。Next.js的生产启动流程是固定的：

1. 必须先通过npm run build（对应你package.json里的next build）编译整个项目，生成生产环境所需的静态资源、服务端代码和页面路由映射；
2. 再通过npm start（next start）启动生产服务器，加载build阶段生成的产物。

如果跳过build步骤直接start，生产服务器根本没有预编译除Index.js之外的其他页面文件，自然会返回404错误。

其他排查方向（如果已执行build仍有问题） #

• 检查页面路由规则：Next.js的路由完全基于pages目录的文件结构，比如pages/about.js对应/about路径，pages/blog/detail.js对应/blog/detail。要确保页面文件名没有拼写错误，尤其注意大小写——开发环境（比如Windows）可能不区分文件名大小写，但生产环境（比如Linux服务器）是严格区分的，这点很容易踩坑；
• 排除配置干扰：你使用的@zeit/next-css是旧版本的CSS支持方案，现在Next.js已经内置了CSS模块支持。可以尝试暂时注释掉next.config.js里的css相关配置，重新执行build和start，看看是否是配置冲突导致路由异常；
• 查看build日志：执行npm run build时，留意终端输出，确认所有页面都被正确编译（日志会列出每个编译的页面路径）。如果某个页面没出现在日志里，说明该页面可能不符合Next.js的页面规范（比如没有导出React组件）。

dev模式与start模式的核心差异 #

这两种模式的运行逻辑完全不同，也是你在dev中没发现问题的关键：

• dev模式（next命令）：启动开发服务器，采用按需编译策略——只有当你访问某个页面时，才会实时编译该页面的代码，同时支持热重载、错误提示等开发友好特性。它不会提前编译所有页面，而是动态处理每个请求；
• 生产模式（next build + next start）：build阶段会预编译所有页面（包括静态生成和服务端渲染的页面），生成优化后的静态资源和路由映射；start阶段只是启动一个轻量服务器，直接加载build好的产物，不会再实时编译代码。这种模式更高效，但完全依赖build阶段的完整编译结果。

所以开发阶段dev模式能动态处理所有页面请求，但生产模式必须依赖预编译的产物，这就是为什么dev正常但start出问题的核心原因。

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