动手：新建你的第一个页面

上一篇你看懂了"户型图"：app/ 里的文件夹结构决定网址结构。这一篇就来真的——给 my-first-app 加盖第一个房间：一个"关于我"页面。

跟着做完，你的项目就不再只有孤零零一个首页了。

先明确目标

我们要的效果：

浏览器访问 localhost:3000/about
看到一个"关于我"页面，上面有你的名字和一句介绍

按上一篇的路由规则倒推，需要的东西是：在 app/ 里建一个 about 文件夹，里面放一个 page.tsx。

传统教程到这里，会让你自己新建文件夹、新建文件、再背一段组件代码抄进去。我们照例不这么干——动手的事交给 Agent。

实战：一句话让 Agent 建页面

确保项目还在运行（浏览器里能打开 localhost:3000；如果没跑，先对 Agent 说"帮我启动项目"）。

然后对 Agent 说：

在我的项目里新建一个"关于我"页面，要求：

访问路径是 /about

页面上显示一个大标题"关于我"，下面写一句自我介绍（内容你帮我随便编一句）

用 Next.js App Router 的方式实现

Agent 会去做三件事：建 app/about/ 文件夹 → 在里面建 page.tsx → 写入页面代码。十几秒钟的事。

验收：亲眼看到新页面

Agent 说"完成"后，别急着信它——自己验收。打开浏览器，访问：

localhost:3000/about

看到"关于我"页面，就算成功。

如果看到的是 404，别慌，先看本文后面的"踩坑指南"，或者直接复制现象给 Agent："我访问 /about 是 404，帮我检查"。

趁热打铁：体验"热更新"

现在做一个小实验，感受 Next.js 开发时最爽的一个特性。

对 Agent 说：

把关于页上的自我介绍改成："我正在学全栈开发，这个网站是我自己搭的。"

Agent 改完，你切回浏览器——注意，不用手动刷新，页面上那句话会自己变成新的。

这就是热更新：代码一保存，浏览器里的页面自动跟着变，项目不用停、不用重启。

你以后每天开发都是这个节奏：Agent 改代码 → 你切到浏览器看效果 → 不满意就再说一句。想想十年前的人改一次代码要手动重启、手动刷新，你就知道现在这个流程有多舒服了。

看一眼 Agent 建了什么

验收通过，花一分钟看看产物，混个脸熟。打开文件树，你会看到：

app/
├── page.tsx          ← 首页（上一篇改过）
└── about/            ← 新建的文件夹，占住 /about 这个门牌号
    └── page.tsx      ← 关于页的内容

点开 app/about/page.tsx，里面的代码大概是这个样子：

export default function AboutPage() {
  return (
    <main>
      <h1>关于我</h1>
      <p>我正在学全栈开发，这个网站是我自己搭的。</p>
    </main>
  );
}

不用懂语法，只认三个特征，以后看到任何页面文件都能认出来：

有个 export default function——这是"这是一个页面"的标志
return (...) 里面装着页面上要显示的内容
内容里那些 <h1>、<p> 和你上一篇在浏览器里看到的文字一一对应

第 5 章会专门讲组件语法，现在能认出"哦，这就是页面文件"就够了。

踩坑指南：新建页面最常犯的三个错

以后自己（或指挥 Agent）建页面时，如果访问是 404，按这个顺序排查，99% 是这三个原因之一：

文件夹名拼错或大小写不对。 想要 /about 就必须叫 about，About、aboout 都是另一个门牌号。
文件名不是 page.tsx。 写成了 pages.tsx、Page.tsx、page.jsx 都会被当成"此户无人"。
文件夹建错了位置。 about 要建在 app/ 里面，而不是和 app/ 平级。

记不住也没关系——真遇到时把网址和 404 截图丢给 Agent，说"帮我修"，这就是第 2 章学的修错流程。

新手常问

Q：我能再建一个 /contact、/projects 吗？

当然，规则一模一样：建文件夹、放 page.tsx。你现在就可以对 Agent 说"再帮我建一个 /projects 页面，展示我的作品列表（先随便写两条）"试试手。

Q：页面建错了，怎么删掉？

对 Agent 说"把 xxx 页面删掉"即可。删页面 = 删整个文件夹（连门牌号一起拆），访问它自然会变 404。

Q：这些页面互相不认识，访客怎么从首页到关于页？

问到点子上了——现在还只能靠手动改网址。这正是下一篇要解决的：给页面之间装上"门"，点一下就过去。

本篇小结

新建页面 = app/ 里建文件夹 + 放 page.tsx，交给 Agent 一句话搞定
验收标准永远是浏览器里亲眼看到，而不是 Agent 说"完成了"
热更新：保存代码后浏览器自动更新，不用重启不用刷新
页面文件的标志：export default function，内容在 return (...) 里
404 排查三件套：文件夹名、page.tsx 拼写、文件夹位置

你的项目现在有两个页面了，但它们是两座"孤岛"。下一篇，我们用链接把它们连成一座能走来走去的房子——顺便做出网站的第一个导航栏。