认识框架:React / Next.js
本节课目标:你能说清框架是什么、为什么要用,并让 Agent 把 Steve's Repair 从多个独立的 HTML 文件迁移到 Next.js。迁完它仍然是个静态网站,只是更有条理,而且你能自己确认它没有走样。
上一节 为什么不一直用 HTML 里,你认识到了一个痛点:你需要重复去不同页面进行同一个内容的修改。Steve 更换一个电话号码，你就需要在每个页面中逐一打开、逐一修改、逐一保存，遗漏任何一页都会导致内容不一致。这一节为这个痛点提供解决方案——框架。
框架是什么
框架（Framework）是一套预先构建好的开发规范与功能模块。它最核心的一项能力正好对准你的痛点:
框架让你把"导航栏"写成一份组件(component),所有页面共用它。组件就是一块"可复用的积木":导航是一块,页脚是一块,按钮也是一块。编写一次，在多处使用。修改这一份，所有引用它的页面同步更新。无需在每个页面中手工逐一修改。
本课会碰到两个名字,先对其建立初步认知，无需刻意记忆:
- React:把页面拆成"组件积木"的那套思路和工具,当下最主流的前端做法之一。
- Next.js:建在 React 之上、更顺手的一层框架,管多个页面怎么组织、怎么共用组件、怎么打包上线。本课迁到的就是它。
切换演示：改一次 Nav，三页同时变
下面的演示模拟了一个简化版的 Next.js 工作方式。中间那个输入框是那一份共享的 Nav 组件;下面三块是三个页面(首页、价格、联系),都引用同一份 Nav。
在输入框里改店名,比如把 Steve's Repair 改成 Steve's Repair 电脑维修,看下面发生什么。
<Nav /> 组件 · 只此一份
首页
Steve's Repair
欢迎来到本店。手机、电脑、平板,坏了都能修。
价格
Steve's Repair
换屏(价格待定)起,清灰(价格待定)起,上门另议。
联系
Steve's Repair
地址(待填),电话(待填),营业时间(待填)。
你只改了一处(那份 Nav 组件),三个页面的导航却同时变了,各页面的正文内容保持独立、互不影响。这就是框架替你做的事。
对比着记:上一节纯 HTML 里,这三块导航是三份各自独立的复印件,你改一份,另外两份保持不变。这里它们是同一份的三个出口,改源头就一起变。同样一句"改店名",两种方式的工作量差距悬殊。
动手：对照"改一次"和"改 5 次"
▸ 操作：左边点一次"改这 1 份共享 Nav"，右边逐页点完 5 份复印件。对比两种方式的工作量。
框架做法:改 1 次共享 Nav
只有一份 Nav 组件,点一下就改完,所有页面自动更新。
已动手:0 次
纯 HTML 做法:逐页手抄 5 次
5 个页面各有一份复印件,需要逐页点开分别修改，遗漏任何一页就会出错。
首页 · 导航店名待改
服务 · 导航店名待改
价格 · 导航店名待改
关于 · 导航店名待改
联系 · 导航店名待改
已手抄:0 / 5 页
迁完之后,文件夹会变成什么样
"迁移到 Next.js"听起来可能有些抽象，落实到文件层面其实非常具体：就是将你那些各自独立的 .html 文件,重新整理成框架的标准结构。下面两棵文件树,就是 Agent 迁移前后在你项目里看到的样子(这是仿 VS Code 文件树的示意,不是真软件;具体文件名 Agent 可能略有不同,认结构就行)。
迁移前 · 一堆并排的 HTML
- steve-repair
- index.html
- services.html
- pricing.html
- about.html
- contact.html
- style.css
每个 .html 里都各自抄了一份导航和页脚。改一处要追着改五处。
迁移后 · Next.js 的结构
- steve-repair
- app
- page(首页)
- pricing(价格页)
- contact(联系页)
- components
- Nav(共享导航)
- Footer(共享页脚)
- package.json
页面进了 app,导航和页脚抽成 components 里各一份,所有页面共用。这正是你在切换演示里体会到的事，落成了文件。
你只需掌握大致结构,无需自己摆放文件。摆文件、写组件是 Agent 的活。你只需要理解:迁完之后多出一个 app 文件夹放页面、一个 components 文件夹放共享积木,还有个 package.json 记着这个项目用到哪些零件。看到这几样,说明 Agent 已按照框架结构正确完成迁移。
Node 和构建:交给 Agent
迁到 Next.js 时,你会第一次撞见两个新词。看懂它们大概是什么就行,活全交给 Agent:
- Node:让框架这类工具能在你电脑上跑起来的"运行环境"。装一次,以后框架项目都靠它。它类似于汽车的燃料，框架是车辆本身，没有燃料车辆便无法运行。
- 构建(build):框架的源码浏览器看不懂,得先"打包"成一堆浏览器能读的普通文件,这一步叫构建。Agent 会用一个命令(像
npm run build)替你完成。
这些命令你只需了解其作用，无需掌握具体操作。装 Node、跑构建、起本地预览,都是 Agent 的活。你只管两件事:看它跑完有没有报错,本地预览页面对不对。报错就把整段红字原样发给 Agent,让它修。
迁完之后,它仍然是个静态网站。页面还是那几页,内容还是那些内容,打开还是那个样子。框架只是将重复的内容组织得更有条理，并没有给它添加后台、数据库、登录功能。那些是
Phase 2 的事。这一关你交付的,还是一个能直接上线的静态站。
提前预告下一节:让 Agent 把它配成"静态导出"。Next.js 默认会尝试运行一个小型服务器,但我们需要的是纯静态文件,这样
下一节上线 时部署平台可以直接将其作为普通网页托管，最为便捷。你无需理解背后的技术细节，只要在让 Agent 迁移时补充一句"请一并配置为静态导出、构建后能直接当静态网站部署"（下面的指令中已为你写好）。Agent 会处理对应的配置,与之前一样，你只需观察结果。
让 Agent 来做
▸ 操作：先 git 存检查点 → 把下面这段话发给 Agent。
在 VS Code 底部终端中操作（见 1.2），先确认当前位置是你的 Steve's Repair 项目文件夹。然后按上一节 存档与后悔药（Git） 提交一个干净的检查点，再打开 Agent，把下面这段话发给它：
把我现在这个 Steve's Repair 静态网站迁移到 Next.js,要点:
1. 仍然是静态网站,内容和页面不要变,只是改成用框架组织。
2. 把导航栏和页脚抽成共享组件,所有页面共用一份。
3. 配成静态导出(static export),构建后产出的就是能直接当静态网站部署的普通文件。
4. 需要装 Node、跑构建的话你来做,把每一步在做什么简单告诉我。
5. 弄好后给我一个本地预览的命令,我要在浏览器里看一眼确认没走样。
如果中间报错,你直接修,卡住了再问我。
跑完之后,终端里成功长什么样
Agent 跑完构建、起好本地预览,终端里大概会是下面这个样子(这是仿终端示意,不是真输出,你那边的字句会有出入)。看的不是每个字,而是两个信号:有没有 绿色的"成功 / ready" 字样、有没有给你一个 本地预览网址(通常长得像 localhost 加一串数字)。
steve-repair - 终端
steve-repair $ npm run build
...(中间一堆进度,不用看)
构建完成 (Compiled successfully)
已导出静态文件到 out 文件夹
steve-repair $ npm run dev
Ready
本地预览:http://localhost:3000
在浏览器打开上面这个地址,就能看你的网站
看到绿色的"构建完成 / Ready"、又拿到一个 localhost 网址,就说明这步成了。要是满屏红字、没给网址,就是出问题了,把那段红字整段复制发给 Agent 让它修。
拿到那个 localhost 网址后,把它复制到浏览器地址栏打开(怎么在浏览器里打开一个地址,见 0.6),逐页对一遍:导航、页脚、各页内容,是不是和迁之前长得一样。一样,就成了。
自检:对着你真实的迁移产物逐项核对
下面这几条,要对着你自己电脑上刚迁好、正在本地预览的那个网站逐项核实后勾选，而非仅凭示意图判断。勾不上的那条,就是还没真迁成功的地方。
还差几项就齐了。
未全部勾选？以下为三种常见问题及对应解决方法：
- 构建满屏红字、根本没起来:大概率是 Node 没装好或版本不对。把那段红字整段复制发给 Agent,让它先把 Node 和构建跑通,别自己硬猜。
- 预览能打开,但某一页走样了、少了导航或页脚:多半是那页没接上共享组件。告诉 Agent"某某页的导航/页脚没了,帮我接上共享组件",让它补。
- 整个迁移结果混乱、远不如迁移前：这正是迁移前提交检查点的典型应用场景。回 1.8 Git 那步,一键回退到干净状态,再让 Agent 分步重来一次。
迁好后这一版,就是你交付 Phase 1 的东西:一个用框架组织、但仍是静态、构建后能直接部署的 Steve's Repair。下一节就可以用它进行上线部署。
把网站迁到 Next.js 之后,关于它发生了什么变化,下面哪个说法是对的?
迁移过程中遇到问题？比如 Node 装不上、构建报一长串红字、本地预览打不开、终端给的网址打开是空白,或者迁完某页走样了。把出错的整段信息原样复制下来,发到群里问问大家,或者直接向 Abel 或助教提问。