从零开始学前端 | 第四十四章：第五阶段综合实战：个人博客项目需求分析与技术选型

本章定位前面七章你已经把 Next.js 第五阶段最重要的基础能力走完了。你已经系统接触过这些内容为什么要学 Next.js。页面路由与基础布局。数据获取与页面渲染基础。组件复用、样式组织与公共模块。表单、提交与基础后端交互意识。项目优化与上线基础。阶段复盘与从学习项目走向作品项目。也就是说到现在为止你已经不只是会写单个页面也不只是会写几个零散功能而是已经具备了进入一个完整 Next.js 项目的基础。现在终于到了第五阶段最关键的节点不再只学零散的 Next.js 知识点而是把这些知识点真正拼成一个完整、可展示、可部署的内容型项目。这次综合实战我们选择的主题是个人博客项目它非常适合作为 Next.js 阶段的综合项目因为它天然会把前面学过的很多核心能力串起来页面路由公共布局数据获取组件复用内容展示表单交互项目优化基础部署但这一篇我们不会一上来就把所有页面和逻辑一次性写满。这一篇的重点是两件事先把博客项目到底要做什么想清楚。先把第一版为什么这样选技术栈想清楚。所以你可以把这一章理解成第五阶段综合实战的起步篇先把项目目标、边界、数据和技术路线定下来。本章学习目标学完这一章后你应该能做到理解个人博客项目为什么适合作为 Next.js 阶段综合实战。知道一个个人博客第一版最值得先完成哪些页面和功能。学会从目标用户、项目价值、核心场景三个角度分析需求。理解为什么项目一开始就要先划清“第一版做什么”和“第一版先不做什么”。学会从功能需求、内容需求、体验需求三个维度拆解项目。知道博客项目里最核心的数据模型应该长什么样。理解为什么技术选型应该围绕当前目标而不是围绕“看起来更高级”。掌握一个适合初学者的 Next.js TypeScript 博客项目技术方案。知道为什么第一版更适合先使用本地内容数据而不是一上来就接数据库或 CMS。掌握一个适合当前阶段的项目目录规划。学会先规划、再编码先主线、再扩展的开发顺序。为下一篇继续进入项目初始化、路由与公共布局搭建做好准备。一、这次综合实战到底要做什么这次我们要做的不是一个只放几段静态介绍文字的小页面。我们要做的是一个真正具备首页展示文章列表文章详情关于页面联系页面可导航可部署这些能力的个人博客项目。这个项目至少应该能完成下面这些核心事情清楚展示站点定位和个人信息。用列表页展示多篇文章或内容。用详情页承载单篇文章阅读。通过公共导航在多个页面之间切换。提供一个关于页让别人知道你是谁、在做什么。提供一个联系页让别人能和你建立联系。能在线访问而不只是本地运行。如果后面你还想继续扩展它也非常适合再加分类筛选标签页搜索分页文章 Markdown 内容管理评论功能后台管理但这些不是第一版必须马上完成的内容。你可以先把这个项目理解成一个真正开始具备“内容展示 页面导航 阅读详情 联系交互 上线能力”完整闭环的 Next.js 网站。二、为什么个人博客特别适合作为 Next.js 阶段综合实战因为它天然会逼着你把前面学过的知识串起来。1. 它一定会用到路由因为博客项目至少会有首页文章列表页文章详情页关于页联系页这正好可以把 Next.js 的页面路由能力真正用起来。2. 它一定会用到公共布局因为导航、页头、页脚这些结构不可能每个页面都手写一遍。这就会自然用到layout.tsx和公共组件。3. 它一定会用到数据获取与内容渲染因为文章列表和文章详情本质上都是根据一组内容数据把页面渲染出来。4. 它一定会用到组件复用因为你很自然就会拆出文章卡片标签组件页面标题区空状态组件导航组件5. 它一定会用到表单交互因为联系页天然适合加入一个最基础的联系表单。6. 它非常适合练“作品化”因为博客项目和“个人表达”“内容展示”“可访问地址”天然相关。它不只是练技术还很适合直接往作品项目方向继续打磨。三、先别急着写代码先回答三个问题综合实战越往后走你越会发现项目做得稳不稳往往先取决于你是不是把项目问题问清楚了。在这一章开始前你至少应该先回答这三个问题这个项目是做给谁看的它最核心要表达什么第一版到底做哪些内容哪些先不做如果这三个问题不清楚后面就很容易出现页面越做越散功能越加越乱技术栈越选越重内容方向也越来越模糊所以这一章的第一价值不是直接产出很多代码而是先把博客项目的起点坐标定清楚。四、这个项目主要是做给谁看的很多人一开始做个人博客时会说做给所有人看。这听起来很大但其实不够具体。当前阶段更稳的做法是先明确主要受众再考虑扩展受众。对于这一版个人博客项目我们可以先把主要受众理解成三类1. 想快速了解你的人例如同学面试官合作者朋友他们会想知道你是谁你在学什么你做过什么你的内容和项目有哪些2. 想阅读你内容的人例如对前端学习感兴趣的人想看技术总结的人想了解你写作主题的人他们更关心文章是否容易找文章是否容易读文章主题是否清楚3. 想联系你的人他们可能更关心怎么找到你怎么留言你是否提供明确的联系入口4. 为什么受众先想清楚很重要因为它会直接影响首页怎么写导航怎么命名哪些页面优先级更高联系页有没有必要五、这个博客项目最核心想解决什么问题如果一个项目只是“我想练练手”那它很容易停留在学习项目阶段。但如果你想把它做得更像作品就要开始回答这个项目最核心在解决什么问题对于个人博客项目来说第一版最核心可以理解成在解决这三个问题1. 帮你建立一个清楚的个人内容出口不是所有内容都散落在聊天记录、笔记软件和本地文件里。而是有一个统一的地方可以系统展示你的文章、想法和成长路径。2. 帮别人更容易理解你别人不需要翻很多地方就能在一个网站里看到你的介绍你的内容你的联系方式3. 帮你练一个真正可展示的 Next.js 项目也就是说这个项目不只是内容容器也是你当前阶段能力的展示载体。六、第一版必须完成哪些核心页面这一节非常重要。因为综合实战最容易失控的地方之一就是还没把主线做通就急着往上堆很多可选功能。当前阶段更稳的做法是先把第一版必须完成的页面想清楚。我建议这一版个人博客至少包含下面五个页面。1. 首页首页负责完成三件事让别人第一眼知道这个网站是做什么的。快速展示你的核心内容入口。建立整体风格和第一印象。2. 文章列表页负责集中展示所有文章或内容卡片。别人进入后应该能很容易浏览标题摘要分类发布时间3. 文章详情页负责展示单篇文章的完整内容。这是博客项目的核心阅读页面。4. 关于页负责介绍你是谁你在做什么你的学习方向或关注领域5. 联系页负责给出联系方式联系表单留言入口这五个页面已经足够构成一个很完整的第一版博客项目主线。七、第一版先不做什么这一步同样非常关键。因为会做取舍往往比会多加功能更重要。当前阶段我建议第一版先不做这些内容登录和权限系统后台文章管理评论系统数据库持久化标签和分类的复杂筛选系统搜索联想和复杂全文搜索多主题切换和复杂动画接第三方 CMS1. 为什么先不做这些不是因为它们没价值而是因为它们会显著增加复杂度但对第一版“把主线跑通”的帮助并不最大。2. 当前阶段最值得先记住什么你可以先记住第一版项目最重要的不是“功能尽量多”而是“主路径尽量完整”。八、先把需求拆成三个层面为了让项目更容易做下去我们可以先把需求拆成三个层面功能需求内容需求体验需求这个拆法非常适合当前阶段。因为它能帮助你把“项目需求”从一团模糊的想法慢慢拆成可执行内容。九、第一层功能需求功能需求关心的是这个网站要能做哪些事情。对于第一版个人博客项目来说最核心的功能需求可以先定成下面这些支持多页面导航跳转。支持文章列表展示。支持文章详情阅读。支持首页展示推荐内容或最近文章。支持关于页展示个人信息。支持联系页表单提交。支持基础部署和在线访问。1. 为什么功能需求要先写得朴素一些因为需求分析阶段的重点不是追求描述得特别“产品经理化”而是先把最关键的使用路径定下来。2. 这一步最怕什么最怕的是一开始把功能列得特别长结果真正能落地的主线反而不清楚。十、第二层内容需求博客项目和很多工具类项目不同。它有一个非常关键的部分叫内容如果内容是空的或者全是占位文字博客项目就很难有真实质感。所以内容需求同样要先想清楚。第一版至少应该准备这些内容首页标题和一句项目说明至少 3 到 5 篇真实文章标题和摘要每篇文章的详情内容关于页的个人介绍联系页的联系说明1. 为什么内容需求不能拖到最后因为它会反过来影响页面布局卡片结构数据模型导航文案2. 当前阶段最简单也最有效的做法是什么先准备少量真实内容而不是一开始追求数量很多。十一、第三层体验需求体验需求关心的是这个网站用起来是不是顺是不是清楚是不是像一个完整网站。第一版最值得先补齐的体验需求包括加载态空状态错误态移动端适配导航清晰首屏重点明确表单提交反馈完整1. 为什么体验需求这么重要因为很多博客项目不是页面不多而是页面有了但体验还停留在半成品状态。2. 当前阶段最值得先补哪几个优先补四状态首屏信息移动端适配这三类收益非常高。十二、先画出这个博客项目的页面结构项目一开始先把页面结构看清楚后面写路由会轻松很多。你可以先把第一版页面结构理解成这样/ ├── 首页 ├── /posts │ ├── 文章列表页 │ └── /posts/[slug] │ └── 文章详情页 ├── /about │ └── 关于页 └── /contact └── 联系页1. 为什么这个结构很适合作为第一版因为它已经具备了主页入口内容聚合页详情阅读页个人介绍页联系入口页这已经是一条非常完整的网站主线。2. 当前阶段最重要的不是页面数量而是每个页面的职责都清楚而且彼此之间能连起来。十三、先设计最核心的文章数据模型博客项目里最核心的数据当然是文章数据这一点越早想清楚后面的列表页和详情页就越稳。一个适合当前阶段的第一版文章类型可以先这样设计interfaceBlogPostItem{slug:string;title:string;summary:string;category:string;publishedAt:string;coverImage:string;content:string[];isFeatured?:boolean;}1. 这些字段分别在解决什么问题slug决定详情页地址title文章标题summary列表页摘要category分类展示publishedAt发布日期coverImage封面图content文章正文内容isFeatured是否推荐展示2. 为什么第一版不必把模型设计得特别复杂因为当前阶段更重要的是先让列表页和详情页主线跑通。只要字段足够支撑当前页面就已经很好了。十四、除了文章还需要哪些数据模型博客项目不只有文章数据。通常还会有另外几类很常见的数据。1. 导航数据interfaceNavItem{label:string;href:string;}2. 联系表单数据interfaceContactFormValue{userName:string;email:string;message:string;}3. 社交链接数据interfaceSocialLinkItem{label:string;href:string;}4. 为什么这些模型也值得先想因为它们会影响公共导航怎么渲染联系页表单怎么组织页脚和关于页怎么展示链接十五、技术选型时先看什么不要先看什么这一节非常重要。很多初学者一做综合项目就容易把技术选型理解成我要不要用一个最火、最复杂、最全的新工具栈。这往往会让项目一开始就变重。当前阶段更稳的做法是技术选型先围绕项目目标、学习阶段和落地成本来判断。你在选技术时先看这三件事它能不能服务当前目标它会不会把项目复杂度抬太高它是不是和你当前已经学过的主线衔接自然1. 当前阶段不要先看什么不要先看谁最潮谁讨论最热谁功能看起来最多因为这些不一定最适合当前项目。2. 当前阶段最值得先建立什么意识你可以先记住好的技术选型不是“功能最满”而是“对当前项目最合适”。十六、为什么框架继续选 Next.js这个问题其实你前面已经学过一轮。但到了综合实战阶段要重新把它落到项目上。这次我们继续选 Next.js不是因为“都学到这里了”而是因为它确实非常适合当前这个博客项目。1. 它天然适合多页面内容网站博客项目非常依赖路由布局内容展示部署而这些正是 Next.js 特别擅长承接的场景。2. 它可以把前面学过的主线串起来例如app/路由layout.tsx页面级数据渲染next/imageRoute Handler这些都能在博客项目里自然落地。3. 为什么这比“纯 React 路由库”更适合当前阶段不是说纯 React 做不到而是当前这套学习路线已经走到 Next.js 阶段用它来做内容型网站会更顺畅也更贴近真实项目表达。十七、为什么继续用 TypeScript这一版项目我仍然建议继续使用 TypeScript。原因非常直接。1. 博客项目天然会有很多结构化数据例如文章数据导航数据表单数据社交链接数据这些都很适合通过类型先约束清楚。2. 组件之间也会有很多 props 传递例如文章卡片接收文章信息导航组件接收导航数组联系表单接收提交状态这时 TypeScript 会明显帮助你把结构看清楚。3. 为什么这里继续用 TS 很划算因为你前面已经为此打过基础。现在正是把TypeScript 的类型约束能力真正放进真实项目里的时候。十八、第一版内容数据为什么先选本地 TypeScript 文件这是这一章技术选型里最关键的一个决定。你可能会想博客项目是不是应该直接上 Markdown、数据库或者接一个 CMS这些方向都可以。但对当前阶段来说第一版我更建议先选择本地 TypeScript 数据文件例如src/data/posts.ts在里面直接维护一组文章对象。1. 为什么这个选择很适合当前阶段因为它有几个非常大的优点简单直接不引入额外解析成本更容易把重点放在路由、布局和页面组织上与 TypeScript 类型模型天然衔接2. 这是不是“不够真实”不是。它只是一个更适合第一版的起点。你后面完全可以把它升级成Markdown 内容源本地 MDXHeadless CMS数据库内容管理3. 当前阶段最稳的节奏是什么先用本地数据跑通主线再升级内容管理方式。这比一上来就把内容系统做复杂要稳很多。十九、为什么样式方案建议先用 CSS Modules 全局样式当前阶段我建议这一版博客项目优先采用globals.css负责全局基础样式CSS Modules 负责组件局部样式1. 为什么这个方案适合当前阶段因为它有几个明显优点和你前面学过的 CSS 主线衔接自然不需要额外引入一整套新的样式心智局部样式边界比较清楚很适合做组件复用练习2. 为什么这里不优先再引入新的样式框架不是说不能用而是当前阶段最重要的是继续把你已经掌握的 HTML/CSS 能力放进真实项目里。这样更有助于你真正建立自己的样式组织感。3. 全局样式适合放什么例如字体基础设置颜色变量页面背景默认链接样式通用容器宽度二十、图片、表单和部署分别怎么选除了框架、语言和样式这个项目里还有三类技术点也要先定一下。1. 图片处理优先使用next/image因为博客项目里通常会有文章封面首页视觉图关于页头像这正好适合把前面学过的图片优化意识落地。2. 表单交互联系页使用基础联系表单 Route Handler也就是沿用前面学过的主线前端受控表单基础校验提交状态反馈/api/contact基础接口处理3. 部署平台优先选择对 Next.js 支持好的平台因为这个项目不只是静态页面还会有路由图片处理可能的基础服务端能力所以平台支持是否完整会直接影响上线体验。二十一、项目第一版目录可以怎么规划这一版博客项目我建议你先采用一个清楚、够用、适合初学者继续扩展的目录结构。例如src/ ├── app/ │ ├── page.tsx │ ├── posts/ │ │ ├── page.tsx │ │ └── [slug]/ │ │ └── page.tsx │ ├── about/ │ │ └── page.tsx │ ├── contact/ │ │ └── page.tsx │ └── api/ │ └── contact/ │ └── route.ts ├── components/ ├── data/ ├── lib/ ├── types/ └── styles/1. 为什么这个结构很适合第一版因为它已经把几类职责分开了app/放页面和路由components/放可复用组件data/放本地内容数据lib/放工具函数types/放类型定义styles/放样式文件2. 当前阶段最重要的不是命名一模一样而是目录职责要清楚自己后面找得到、改得动。二十二、开发顺序怎么排最稳这一节非常重要。因为项目综合实战最怕的不只是不会写而是顺序一乱做着做着就失去主线。当前阶段更稳的开发顺序通常是这样1. 先创建项目并确定目录结构先把地基搭好。2. 再准备本地文章数据和类型先让数据主线清楚。3. 再搭公共布局和导航先让站点骨架出来。4. 再完成首页、列表页、详情页主线先把最核心的内容展示路径走通。5. 再补关于页和联系页让网站从“内容能读”走向“站点更完整”。6. 最后再补优化和部署把它真正推进到可展示状态。7. 为什么这个顺序比较稳因为它基本符合先主结构再主内容再主交互再补完成度这个节奏。二十三、这一章最容易踩的几个坑这一节建议你认真看。因为综合实战一开始选错方向后面会一直累。1. 坑一第一版功能列得太多这样很容易导致什么都想做什么都没做完整2. 坑二内容全用占位数据这会让博客项目从一开始就缺少真实质感。3. 坑三一上来就接复杂内容系统这样很容易把重心从博客网站主线转移到内容管理技术细节4. 坑四路由、数据、布局还没清楚就急着美化这样后面结构一变样式往往要反复重来。5. 坑五没有明确“第一版先不做什么”这样项目边界会越来越失控。二十四、本章实践练习这一章的练习重点是把“项目需求”和“技术路线”真正想清楚。1. 练习 1写出你的第一版页面清单请你根据这一章内容写出你自己的第一版页面清单。至少包含首页文章列表页文章详情页关于页联系页这个练习的重点是从“我大概想做个博客”切换到“我知道第一版具体有哪些页面”。2. 练习 2补出你的项目目标和受众请你用自己的话写下这个博客主要给谁看它最核心想表达什么为什么你觉得它值得继续做成作品这个练习会帮助你真正建立项目不是页面堆叠而是有目标和对象的表达。3. 练习 3写出第一版技术选型说明请你用自己的话解释为什么用 Next.js为什么用 TypeScript为什么第一版先用本地数据为什么样式先用 CSS Modules这个练习会帮助你把技术选择和项目目标真正连接起来。4. 练习 4画出目录结构草图请你根据这一章内容画出你自己的第一版目录结构草图。至少包含app/components/data/lib/types/这个练习会帮助你真正建立项目不是只靠页面文件堆出来的而是要靠结构组织起来的。二十五、学习重点提示这一章请你重点记住下面这些话第五阶段综合实战刚开始时最重要的不是马上写很多页面而是先把项目目标、范围和顺序想清楚。个人博客非常适合作为 Next.js 阶段综合项目因为它天然会串联路由、布局、内容展示、表单交互和部署能力。第一版项目最重要的不是功能尽量多而是主路径尽量完整。需求分析可以先从功能需求、内容需求和体验需求三个层面拆解。数据模型越早想清楚后面的列表页、详情页和组件 props 就越稳。技术选型应该围绕当前目标而不是围绕“看起来更高级”。第一版博客项目先用本地 TypeScript 数据文件通常比一开始就接复杂内容系统更稳。CSS Modules 加全局样式是一个很适合当前阶段继续锻炼 CSS 组织能力的方案。先规划再编码先主线再扩展。如果你只记一句话请记住综合实战的第一步真正拉开差距的往往不是谁代码写得快而是谁先把项目目标、页面范围、数据结构和技术路线想清楚。二十六、本章小结这一章我们正式开启了第五阶段综合实战。你已经理解了个人博客为什么适合作为 Next.js 阶段的综合项目第一版博客项目应该包含哪些核心页面如何从目标用户、项目价值和第一版边界来分析需求功能需求、内容需求和体验需求应该怎样拆解文章数据、导航数据和联系表单数据最基础应该怎么建模为什么框架继续选 Next.js语言继续选 TypeScript为什么第一版更适合先用本地内容数据和 CSS Modules第一版目录结构和开发顺序为什么要先规划清楚更重要的是你开始建立一种非常关键的项目意识做综合项目不是从“先把代码敲出来”开始而是从“先把项目目标、页面范围和技术边界理顺”开始。这一步非常关键。因为从这里开始你已经不只是在学 Next.js 知识点而是在开始真正进入Next.js 综合项目的需求规划与落地阶段。二十七、课后思考题请你认真思考下面这些问题为什么说个人博客天然适合作为 Next.js 阶段综合实战为什么第一版项目最重要的是“主路径完整”而不是“功能尽量多”为什么需求分析时要把功能需求、内容需求和体验需求分开看为什么博客项目里内容准备不能完全拖到最后为什么第一版更适合先用本地 TypeScript 数据文件而不是直接上复杂内容系统技术选型时为什么不能只看“谁最火、谁最全”为什么综合实战一开始先画页面结构和目录结构会更稳建议你把这些问题用自己的话写下来。只要你能把这些问题讲清楚说明你已经真正开始进入第五阶段综合实战的主线了。二十八、下一篇预告下一篇我们会继续推进第五阶段综合实战进入第五阶段综合实战个人博客项目初始化、路由设计与公共布局搭建到那时你会开始真正把这一篇定好的项目目标和技术路线落到代码结构里项目怎么初始化路由目录怎么创建公共导航和页脚怎么组织layout.tsx怎样把整个站点骨架搭起来也就是说下一篇开始我们会从“需求分析与技术选型”继续走到个人博客项目第一版骨架的真正搭建。