NextJS 13 app目录路由问题：博客文章点击后404报错

问题原因 #

你遇到的404错误是因为App目录的路由规则和Pages目录完全不同：在App目录中，每个路由路径段需要对应一个独立的文件夹，该文件夹下的page.js才是该路由的页面组件。你直接把blog1.js放在blog/文件夹下，NextJS无法识别这是/blog/blog1的路由页面。

解决步骤 #

1. 调整目录结构 #

将现有目录修改为：

app/
  blog/
    page.js  # 保留原/blog/page.js内容
    blog1/    # 创建新的子文件夹
      page.js # 将原blog1.js的内容移到这里

2. 规范页面组件格式 #

确保app/blog/blog1/page.js是标准的NextJS页面组件，示例如下：

export default function Blog1() {
  return (
    <div>
      <h1>Blog 1 内容</h1>
      {/* 这里放置你的博客具体内容 */}
    </div>
  )
}

3. 保持Link路径不变 #

你原有的Link代码无需修改，href="/blog/blog1"的路径现在会正确匹配新的目录结构。

补充说明 #

App目录路由核心规则：

• 每个路由路径对应嵌套文件夹，比如/a/b对应app/a/b/
• 路由页面必须放在对应文件夹下的page.js（或page.tsx）中
• 直接放在文件夹下的非page.js文件不会被当作路由页面，仅可作为组件或工具文件导入使用

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