Next.js目录路由异常：访问/posts/first-post出现404错误

问题描述 #

• 学习Next.js教程时，按文档要求使用src/app目录（替代旧pages目录）创建页面，启动localhost:3000开发服务器后，访问http://localhost:3000/posts/first-post出现404错误。
• 项目文件夹结构如图所示
• 初始jsconfig.json配置：

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

已尝试操作 #

• 调整文件目录位置
• 重启开发服务器
• 修改jsconfig.json配置为：

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/app/*"]
    }
  }
}

但问题仍未解决。

解决方案建议 #

• 检查App Router页面结构是否符合约定
  要访问/posts/first-post，必须在src/app下创建对应的嵌套目录，且每个页面目录内必须包含page.js（或page.tsx）文件，正确结构应为：

  src/
    app/
      posts/
        first-post/
          page.js
  

  注意：文件名必须严格为page.js/page.tsx，这是App Router识别页面的核心约定，不能使用其他名称。

• 恢复jsconfig.json的正确配置
  初始配置"@/*": ["./src/*"]是正确的，修改为./src/app/*会导致路径别名指向错误，改回初始配置后，完全停止开发服务器再重新启动。同时确保jsconfig.json放在项目根目录（与src文件夹同级）。

• 强制刷新服务器与清除缓存

  1. 按Ctrl+C完全停止当前开发服务器
  2. 删除项目根目录下的.next文件夹
  3. 重新执行npm run dev启动服务器，确保服务器重新扫描所有文件。

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