Next.js动态路由访问出现404错误，文件夹结构合规

• 核心结构错误：你当前的文件夹结构不符合Next.js App Router的路由规则。App Router要求每个路由段对应一个文件夹，页面逻辑必须放在对应路由文件夹下的page.tsx文件中。你现在把page.tsx嵌套在[id].tsx文件里，Next.js无法识别这个动态路由配置。

• 正确的文件夹结构应该是：

  app
    blog
      [id]
        page.tsx
  

• 修正步骤：

  1. 删除app/blog/[id].tsx文件，新建一个名为[id]的文件夹
  2. 将原有的page.tsx移动到app/blog/[id]/目录下
  3. 重启开发服务器（执行npm run dev），之后访问http://localhost:3000/blog/任意id值即可正常加载页面

• 额外排查方向：

  • 确认你的Next.js版本在13.4及以上（App Router稳定版从该版本开始）
  • 检查page.tsx是否正确导出默认组件，并且正确接收params参数，示例代码：

    export default function BlogPost({ params }: { params: { id: string } }) {
      return <div>当前博客ID：{params.id}</div>
    }
    

  • 尝试用浏览器无痕模式访问，或者清除缓存，避免路由缓存导致的异常

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