Next.js非首页路由出现404页面未找到问题求助

Next.js /blog路由404问题排查方案 #

1. 确认使用的路由系统 #

Next.js有两种路由体系，规则差异很大，先对应你的项目类型调整：

• App Router（当前推荐）：项目根目录存在app文件夹
  路由必须通过「文件夹 + page.js/jsx」的结构定义。直接创建blog.js不会被识别，正确做法是：
  在app目录下新建blog文件夹，然后在该文件夹内创建page.js（或page.jsx），结构示例：

  app/
    page.js       # 对应 / 路由
    blog/
      page.js     # 对应 /blog 路由
  

• Pages Router：项目根目录存在pages文件夹
  路由文件必须放在pages目录下，直接创建pages/blog.js即可对应/blog路由。如果你的blog.js放在pages目录以外的位置，Next.js不会将其解析为路由页面。

2. 基础检查项 #

• 配置验证：你的nextConfig中pageExtensions包含js，这部分没问题，无需修改。
• 重启开发服务器：修改路由文件结构后，必须重启next dev服务，新路由才会生效。
• 文件名校验：确保文件名是全小写的blog.js，部分操作系统区分文件名大小写，拼写或大小写错误会导致路由无法识别。

内容的提问来源于stack exchange，提问作者Kiran S youtube channel