app/songs/[id]/page.tsx
夜曲
App Router 按目录生成路由，这页就是那个文件。
工程与栈 · Web 技术
Next.jsNext.js
Next.js 用文件当路由：/songs/7 要对上 app/songs/[id]/page.tsx。地址和文件对不上，就没有这页。
先认出这张夜曲页，再看它对上哪个文件
下面就是 /songs/7：默认文件已经对上并画出夜曲。文件停在 album，404 也写在同一张页上。
文件对上了：夜曲长在这张路由页上。
原因：URL /songs/7 对上 app/songs/[id]/page.tsx，夜曲页被画出来。下一步：点「文件还停在 album」，看会不会 404。
知识点：文件即路由
页上的标题已经演示了对应关系，这里只命名四条。
- App Router 用目录当地址：app/songs/[id]/page.tsx 就是 /songs/7。
- 框架按文件找页，不是你在代码里手写一张路由表。
- 地址和文件对不上就是 404，不会随便拿另一页顶上。
- 离开后要盯：本地 npm run dev 能打开这条地址，渲染策略要说清。
什么时候用、怎么用
要按 URL 出页、服务端取数或静态生成时用 Next；只在一页里改状态用 React 就够。
- 信号：多条地址、详情页、要在服务端先画好 HTML。
- 适用：先建文件，再用同一条 URL 打开验收。
- 不适用：改 URL 却不建对应文件——那只会 404。
- 最短路径：建 page.tsx → 打开地址 → 看页上物件是不是这条路由的。
正反例：同一条 /songs/7
目标都是打开夜曲，只改文件在不在对应目录。
夜曲页出现。结果长在页面上。
标题变成找不到页面。失败写在物件上。
快速自测
打开 /songs/7 却 404，首先该查什么？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。