Next.js应用部署后出现页面未找到，但本地运行正常

• 检查路由规则匹配

  • 确认Next.js版本与路由目录对应：如果使用pages目录（Pages Router），确保页面文件命名符合规则，比如首页必须是pages/index.js，二级页面如pages/about.js对应/about路径；如果是app目录（App Router），需保证路由文件夹结构正确（比如app/about/page.js对应/about）。
  • 若同时存在app和pages目录，Next.js 13+会优先使用app目录下的路由，若两者有同名路由，pages中的路由会被覆盖，检查是否存在冲突。

• 验证Railway构建与启动配置

  • 确认构建命令为生产环境命令：Railway默认会检测npm run build，若使用yarn/pnpm需手动指定为yarn build或pnpm build，确保构建过程无遗漏。
  • 启动命令必须为npm start（对应next start），禁止使用开发环境的npm run dev，避免生产环境用开发模式启动。

• 排查基础路径（Base Path）配置

  • 若应用部署在子路径下，需在next.config.js中配置basePath：

    /** @type {import('next').NextConfig} */
    const nextConfig = {
      basePath: '/your-sub-path',
    }
    module.exports = nextConfig
    

  • 本地测试时可添加参数next dev --base-path /your-sub-path模拟生产环境路径。

• 检查静态导出与动态路由冲突

  • 若在next.config.js中设置了output: 'export'（静态导出），需确保所有路由均为静态路由，无动态路由（如pages/post/[id].js），静态导出的输出目录为out，此时Railway的启动命令需替换为静态服务器命令，比如npx serve out。
  • 若使用动态路由，必须移除output: 'export'配置，使用next start启动应用。

• 深挖Railway日志细节

  • 查看完整的构建日志与启动日志，部分警告可能未在控制台显眼位置展示，比如路由文件语法错误、依赖缺失等问题，可能导致构建后的路由不完整。
  • 确认Next.js正确监听Railway分配的端口：Next.js的next start会自动读取环境变量PORT，无需手动指定端口。

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