认识框架：React / Next.js
你能说清框架是什么、为什么要用，并让 Agent 把 Steve's Repair 从多个独立的 HTML 文件迁移到 Next.js。迁完它仍然是个静态网站，只是更有条理，而且你能自己确认它没有走样。
回头一题
这道题不考这一节，考前面学过的。想不起来就回去翻一眼再答——记不住的东西，真用的时候一样会卡。
这一节要让 Agent 把整站迁到框架，动手之前最该先做什么？
上一节 为什么不一直用 HTML 里，你已经尝到了那个痛点：同一处内容，要跑到好几个页面里改好几遍。Steve 换个电话号码，你就得一页页打开、一页页改、一页页存，漏掉哪一页，内容就对不上。这一节给你解药——框架。
框架是什么
框架（Framework）就是一套现成的开发规矩加零件。它最要紧的一项本事，正好治你这个痛:
组件就是一块"能反复用的积木":导航一块，页脚一块，按钮也是一块。写一次，到处用。改这一份，所有用到它的页面跟着变，不用一页页去手动改。
这门课会碰到两个名字，知道个大概就行，不用背:
- React:把页面拆成"组件积木"的那套思路和工具，当下最主流的前端做法之一。
- Next.js:建在 React 之上、更顺手的一层框架，管多个页面怎么组织、怎么共用组件、怎么打包上线。本课迁到的就是它。
切换演示：改一次 Nav，三页同时变
下面的演示模拟了一个简化版的 Next.js 工作方式。中间那个输入框是那一份共享的 Nav 组件；下面三块是三个页面(首页、价格、联系),都引用同一份 Nav。
在输入框里改店名，比如把 Steve's Repair 改成 Steve's Repair 电脑维修,看下面发生什么。
上一节纯 HTML 里，这三块导航是三份各自独立的复印件，你改一份，另外两份保持不变。这里它们是同一份的三个出口，改源头就一起变。同样一句"改店名",两边的工作量差得不是一点。
动手：对照"改一次"和"改 5 次"
框架做法：改 1 次共享 Nav
只有一份 Nav 组件，点一下就改完，所有页面自动更新。
纯 HTML 做法：逐页手抄 5 次
5 个页面各有一份复印件，得一页页点开分别改，漏掉哪页哪页就错。
迁完之后，文件夹会变成什么样
"迁移到 Next.js"听起来有点抽象，落到文件上其实很具体：就是把你那些各自为政的 .html 文件，重新码成框架规定的样子。下面两棵文件树，就是 Agent 迁移前后在你项目里看到的样子(这是仿 VS Code 文件树的示意，不是真软件；具体文件名 Agent 可能略有不同，认结构就行)。
- steve-repair
- index.html
- services.html
- pricing.html
- about.html
- contact.html
- style.css
- steve-repair
- app
- page(首页)
- pricing(价格页)
- contact(联系页)
- components
- Nav(共享导航)
- Footer(共享页脚)
- package.json
摆文件、写组件是 Agent 的活。你只要知道：迁完之后会多出一个 app 文件夹放页面、一个 components 文件夹放共享积木，还有个 package.json 记着这个项目用到哪些零件。看到这几样，就说明 Agent 按框架的规矩迁对了。
Node 和构建：交给 Agent
迁到 Next.js 时，你会第一次撞见两个新词。看懂它们大概是什么就行，活全交给 Agent:
- Node:让框架这类工具能在你电脑上跑起来的"运行环境"。装一次，以后框架项目都靠它。它像汽油，框架是车，没油车跑不起来。
- 构建(build):框架的源码浏览器看不懂，得先"打包"成一堆浏览器能读的普通文件，这一步叫构建。Agent 会用一个命令(像
npm run build)替你完成。
装 Node、跑构建、起本地预览，都是 Agent 的活。你只管两件事：看它跑完有没有报错，本地预览页面对不对。报错就把整段红字原样发给 Agent,让它修。
页面还是那几页，内容还是那些内容，打开还是那个样子。框架只是把重复的东西理顺了，没给它加后台、数据库、登录。那些是 Phase 2 的事。这一关你交付的，还是一个能直接上线的静态站。
Next.js 默认想跑一个小服务器，但我们要的是一堆纯静态文件，这样 下一节上线 的时候，部署平台当普通网页一放就完事，最省事。背后的技术细节你不用懂，只要在让 Agent 迁移时补一句"请一并配置为静态导出、构建后能直接当静态网站部署"（下面的指令中已为你写好）。配置的事 Agent 处理，跟前面一样，你只管看结果。
让 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 加一串数字)。
看到绿色的"构建完成 / Ready"、又拿到一个 localhost 网址，就说明这步成了。要是满屏红字、没给网址，就是出问题了，把那段红字整段复制发给 Agent 让它修。
拿到那个 localhost 网址后，把它复制到浏览器地址栏打开(怎么在浏览器里打开一个地址，见 0.6),逐页对一遍：导航、页脚、各页内容，是不是和迁之前长得一样。一样，就成了。
自检：对着你真实的迁移产物逐项核对
下面这几条，要对着你自己电脑上刚迁好、正在本地预览的那个网站一条条对着核，别照着示意图就勾。勾不上的那条，就是还没真迁成功的地方。
还差几项就齐了。
- 构建满屏红字、根本没起来：大概率是 Node 没装好或版本不对。把那段红字整段复制发给 Agent,让它先把 Node 和构建跑通，别自己硬猜。
- 预览能打开，但某一页走样了、少了导航或页脚：多半是那页没接上共享组件。告诉 Agent"某某页的导航/页脚没了，帮我接上共享组件",让它补。
- 整个迁移结果一团糟、还不如迁之前：迁移前存的那个检查点，就是为这一刻准备的。回 1.8 Git 那步退回干净状态，再让 Agent 分步重来一次。
迁好后这一版，就是你交付 Phase 1 的东西：一个用框架组织、但仍是静态、构建后能直接部署的 Steve's Repair。下一节就拿它上线。
把网站迁到 Next.js 之后，关于它发生了什么变化，下面哪个说法是对的？
迁移过程中遇到问题？比如 Node 装不上、构建报一长串红字、本地预览打不开、终端给的网址打开是空白，或者迁完某页走样了。把出错的整段信息原样复制下来，发到群里问问大家，或者直接向 Abel 或助教提问。