章末实战：搭一个多页面小站骨架

前面四篇，你手里攥着一把零件：静态路由、page.tsx、<Link> 导航、动态路由。每一件都单独验过货，但还散落在工作台上。

这一篇是本章的收官战：把零件攒成一台整机——一个五脏俱全的多页面小站。做完它，你对"一个网站是怎么由路由组织起来的"会形成完整的体感。

先看图纸：我们要搭什么

一个极简但完整的个人小站，四个页面：

网址	页面	用的知识点
/	首页（含导航栏 + 欢迎语）	静态路由
/about	关于我	静态路由
/blog	博客列表（3 篇假文章入口）	静态路由 + <Link>
/blog/任意slug	文章详情（万能模板）	动态路由

导航栏出现在每个页面顶部，含三个入口：首页 / 博客 / 关于。

这四个页面之间的关系，正好把本章三板斧全用一遍——这也是攒它的意义。

实战：一段话让 Agent 攒整机

前几篇是逐个页面建，这次试试一次性描述完整需求——这正是指挥 Agent 的进阶玩法：需求描述得越像"图纸"，它干得越准。

对 Agent 说：

帮我把项目整理成一个多页面小站，要求：

1. 首页 /：顶部导航栏 + 大标题"欢迎来到我的小站" + 一句欢迎语
2. 关于页 /about：导航栏 + 标题"关于我" + 一段自我介绍
3. 博客列表页 /blog：导航栏 + 标题"我的博客" + 用 Link 列出 3 篇假文章（标题和 slug 你帮我编）
4. 文章详情页 /blog/[slug]：导航栏 + 显示当前 slug
5. 每个页面都要有同一个导航栏，含"首页 / 博客 / 关于"三个入口，用 Link 组件
6. 已有的页面内容可以覆盖重写，样式从简

Agent 干完后，先别急着验收单个页面——先看文件树，确认"户型"对不对：

app/
├── page.tsx              ← 首页
├── about/
│   └── page.tsx          ← 关于页
└── blog/
    ├── page.tsx          ← 博客列表页
    └── [slug]/
        └── page.tsx      ← 文章详情模板

四个 page.tsx，四个门牌号，和图纸一一对应。如果多了少了，先让 Agent 调整，再往下走。

验收清单：逐项打勾

这次验收给一份完整清单，像测试员一样逐项过，全部打勾才算完：

页面都在吗？

• / 显示首页，有欢迎语
• /about 显示关于页
• /blog 显示列表页，有 3 条文章入口

导航通吗？

• 每个页面顶部都有导航栏
• 从首页点"博客"→ 到列表页；点"关于"→ 到关于页；都能点回来
• 跳转时"嗖"一下就切，没有整页刷新（无刷新跳转）

动态路由灵吗？

• 列表页点任一文章 → 详情页显示对应的 slug
• 手动把地址栏的 slug 改成别的词（比如 /blog/test)→ 显示跟着变
• 访问 /haha 这类不存在的网址 → 404（名册查无此户，正常）

有任何一项不过，把具体哪项、什么现象丢给 Agent 修，修完重跑整张清单——别只查修的那一项。

站起来了，但它还很"毛坯"

清单全过之后，把四个页面来回点几遍。这个小站：能跑、能跳、能扩展（加文章就是加网址，改模板一处全改）。

但你肯定也憋着一个感受——它太素了。白底黑字、链接是默认的蓝色下划线，像九十年代的网页。

这不是你的问题，是课程进度的安排：本章只管"骨架"，还没学"装修"。就像盖房子，先起框架再谈软装——框架不正，装修再漂亮也白搭。现在框架正了。

下一章就干装修的事：把导航栏、页面内容拆成组件（可复用的乐高块），再用 Tailwind 给它们上色、排版。同样的内容，装修完立刻"像个小红书博主的主页"。

新手常问

Q：Agent 把导航栏复制了四份，每个页面一份，这正常吗？

正常，初学阶段完全能接受。第 5 章学了组件和布局（layout.tsx）之后，会把它收敛成"只写一次"。那时再回头优化这个小站，你会更有体会。

Q：我想给这个小站再加个"作品"页，怎么加？

你已经会了：app/ 里建 projects 文件夹 + page.tsx，再往导航栏加一个 <Link>。先自己指挥 Agent 试试——这是本章最好的课后练习。

Q：文章详情页现在只显示 slug，什么时候能有真文章？

分两步走：第 5、6 章先学会把内容写得好看、会获取数据；第 7 章接上数据库，按 slug 查真文章。模板今天已经就位，就等数据了。

Q：这个小站别人能访问吗？

还不能，它只跑在你自己电脑上（localhost 只有你能看）。让它上网是第 12~15 章的"部署四部曲"，到时候会把今天这个小站（或它的升级版）真正发布出去。

本篇小结

• 本章收官实战：一段话图纸式需求 → Agent 攒出四页面小站
• 验收用清单逐项打勾：页面齐不齐、导航通不通、动态路由灵不灵
• 最终文件树四个 page.tsx，对应四个网址——这就是"文件即路由"的完整落地
• 小站能跑能跳，但还是毛坯——装修是下一章的事

第 4 章总结

回顾一下，这一章你拿下了 Next.js 最核心的概念——路由：

1. 路由本质：网址 → 页面的对应规则，Next.js 里"文件即路由",app/ 结构就是名册
2. 静态路由：建文件夹 + page.tsx，一个文件夹一个门牌号
3. <Link> 导航：站内跳转无刷新，口诀"站内用 Link，站外用 a"
4. 动态路由：方括号文件夹 [slug]，一个模板吃无数网址，params.slug 取值
5. 攒成整机：四个页面的小站，会看图、会提图纸式需求、会用清单验收

更重要的是，从这一章开始，你不再是"让 Agent 干什么就干什么"的新手了——你开始用路由的思维想问题：看到一个网站，会下意识拆它的网址结构；想加一个功能，会先想"它该挂在哪个网址下"。这种思维，比任何一条命令都值钱。

下一章《React 组件与样式》：把小站拆成可复用的组件，再用 Tailwind 把它装修漂亮。你的小站要迎来第一次"颜值飞跃"，我们第 5 章见。