本章定位到这里我们正式进入第五阶段Next.js。前面你已经一步一步走过了非常完整的一段路HTML 和 CSS让你能搭建页面结构和样式。JavaScript让你能处理交互、数据和 DOM。TypeScript让你能用类型把数据结构和函数边界描述清楚。React让你能用组件、状态和数据流组织一个中小型交互项目。尤其是在刚刚结束的 React 综合实战里你已经做过一个记账板项目真正把这些能力串了起来表单录入列表渲染条件渲染筛选切换统计卡片组件通信编辑和删除本地存储这说明你已经不只是会写零散组件而是已经开始具备用 React 组织一个小项目的能力。那为什么还要继续学习 Next.js这就是本章要回答的核心问题。这一章我们不会一上来就讲一堆渲染模式也不会马上让你背很多框架术语。我们会先把几个最基础、也最重要的问题讲清楚Next.js 和 React 到底是什么关系只会 React 的时候真实项目还会遇到哪些问题Next.js 帮我们补上了哪些能力它适合什么样的项目初学者应该用什么心态开始学 Next.js你可以把这一章理解成在真正开始写 Next.js 页面之前先建立“为什么需要应用框架”的整体认知。本章学习目标学完这一章后你应该能做到理解 Next.js 和 React 的关系。知道 Next.js 不是替代 React而是在 React 基础上提供更完整的应用能力。理解为什么真实项目需要路由能力。理解为什么真实项目需要构建、优化和部署相关能力。初步理解 Next.js 为什么会提到服务端能力。知道 Next.js 适合哪些类型的项目。能说出纯 React 项目和 Next.js 项目的基本差异。知道初学阶段不需要一次吃透所有渲染模式。为下一章学习页面路由与基础布局做好准备。一、为什么学完 React 后会自然进入 Next.jsReact 阶段你已经解决了一个非常核心的问题怎样用组件和状态组织用户界面。这件事非常重要。但当你想把一个 React 页面继续做成更完整的网站或应用时会继续遇到一些新问题。例如多个页面之间怎么切换首页、列表页、详情页应该怎么组织页面刷新后路径和内容怎样对应图片、代码、页面加载速度怎样优化项目怎么打包上线某些数据能不能在服务端先准备好未来如果有登录、接口、表单提交前后端边界怎么理解这些问题并不是 React 本身完全不能做。但 React 更核心的职责是构建用户界面。而一个完整应用还需要很多配套能力。Next.js 就是在这个背景下出现的。你可以先这样理解React 帮你组织界面Next.js 帮你在 React 基础上组织一个更完整的应用。二、Next.js 到底是什么先给一个当前阶段最够用的理解Next.js 是一个基于 React 的应用开发框架。这里有两个关键词非常重要。1. “基于 React”是什么意思这表示你前面学过的 React 知识并没有作废。在 Next.js 里你依然会继续使用JSX组件propsstate事件表单列表渲染条件渲染也就是说Next.js 不是绕开 React而是站在 React 之上继续往前走。2. “应用开发框架”是什么意思框架和单纯的库相比通常会提供更多“项目级能力”。例如页面路由项目目录约定构建配置图片优化数据获取方式部署支持服务端能力你可以把它理解成Next.js 不只是帮你写一个组件而是帮你组织一个完整的 React 应用。三、先别急着背概念先看纯 React 项目还缺什么很多初学者第一次听 Next.js 时会立刻遇到很多新词路由服务端渲染静态生成App RouterServer ComponentsAPI Routes部署这些词当然都会慢慢学。但现在先别急。更稳的方式是先回到一个实际问题如果只用 React 做一个完整网站你还需要自己处理哪些事情例如一个个人博客或内容展示网站通常至少需要首页文章列表页文章详情页关于页面导航链接页面标题和描述图片展示数据读取打包部署React 可以帮你做组件和界面但这些项目级问题通常还需要更多工具和约定来组织。Next.js 的价值就在这里它帮你把“只会写 React 组件”继续推进到“能组织一个完整网站或应用”。四、Next.js 和 React 的关系最容易怎么理解你可以先用一个非常简单的比喻来理解。React 更像是一套强大的界面构建能力。Next.js 更像是在这套界面能力之上帮你准备好项目结构、路由、构建、优化和服务端能力的一整套开发框架。所以它们不是谁替代谁的关系。更准确地说Next.js 使用 React 来构建界面同时在 React 之外补上完整应用需要的能力。1. 这对学习顺序有什么启发这也是为什么我们先学 React再学 Next.js。因为如果你还不懂 React 组件、状态和数据流直接进入 Next.js就会很容易同时被两层问题压住React 组件怎么写Next.js 项目怎么组织而现在你已经走完 React 阶段再看 Next.js就会更容易看清它到底是在 React 之外帮你补什么。2. 初学阶段最重要的心态不要把 Next.js 当成一门全新的语言。更适合的心态是我已经会写 React 页面了现在学习怎样把 React 页面组织成更完整的应用。五、为什么真实项目需要路由进入 Next.js 后你会非常快地接触到一个概念路由先给一个当前阶段最够用的理解路由就是 URL 地址和页面内容之间的对应关系。例如/对应首页/posts对应文章列表页/posts/1对应某篇文章详情页/about对应关于页面1. 为什么路由很重要因为一个稍微完整的网站通常不会只有一个页面。它会有首页列表页详情页表单页设置页关于页如果没有清晰的路由用户就很难通过地址进入对应页面页面结构也会越来越不清楚。2. Next.js 在路由上帮了什么Next.js 提供了约定式的页面路由组织方式。你现在不用急着记细节只需要先知道在 Next.js 里目录和文件结构会直接影响页面路由。下一章我们会正式讲页面路由和基础布局。六、为什么真实项目需要构建和优化能力当你只写一个练习页面时可能不太关心打包体积图片加载代码拆分页面性能生产环境构建但真实项目不一样。真实项目通常会关心页面能不能加载得更快。图片会不会太大。代码能不能按需加载。上线后的文件能不能被浏览器高效缓存。构建过程能不能稳定。这些能力如果都靠自己从零配置会比较麻烦。Next.js 的价值之一就是它把很多常见的工程能力和优化能力内置好了让你更专注于页面和业务。初学阶段你不需要立刻理解所有优化细节。你先建立一个认识就够了Next.js 不只是写页面它也在帮你处理项目运行和上线时的很多基础工程问题。七、为什么 Next.js 会提到服务端能力这是很多初学者第一次接触 Next.js 时最容易懵的地方。学 React 时你更多是在浏览器里写页面交互。但学 Next.js 时你会经常听到服务端服务端渲染服务端组件后端接口数据获取这些词一出来就很容易让人紧张。先别急。当前阶段你可以先这样理解有些页面内容不一定非要等浏览器打开后再请求和生成框架可以在更靠近服务端的位置提前准备一部分内容。这对某些项目很有价值。例如内容网站希望首屏更快博客文章希望更容易被搜索引擎理解商品详情页希望打开时就有完整内容某些数据希望在页面生成前就准备好1. 现在需要马上吃透服务端渲染吗不需要。初学阶段你只需要先知道Next.js 比纯前端 React 项目多了一些服务端参与的能力。后面学到数据获取和页面渲染时我们会再逐步展开。2. 为什么这对现代前端很重要因为现代前端越来越不只是浏览器里写一点交互代码。很多项目会同时关心首屏速度SEO页面结构数据来源部署方式前后端协作Next.js 正是因为能把这些问题放进同一个框架里组织所以才会在现代 React 项目里很常见。八、Next.js 帮你省掉了哪些基础配置工作如果你只用 React 从零搭项目你可能需要自己考虑很多配套工具。例如路由库怎么选目录结构怎么设计构建怎么配置图片怎么优化页面标题怎么处理部署流程怎么接数据获取放在哪里Next.js 会给你一套相对清晰的默认方案。这不代表你完全不用理解底层。但它可以让你少花很多时间在每个项目都要重复搭一遍基础架子这件事上。1. 对初学者来说这有什么好处好处是你可以更快进入“做完整项目”的状态。你不用一上来就纠结所有工程配置而是先按框架约定把页面、路由、组件和数据组织起来。2. 对团队项目来说这有什么好处好处是大家更容易按同一套结构协作。因为框架已经提供了一部分约定团队内部就不需要每次都从零讨论页面放哪里路由怎么写公共组件怎么组织构建怎么跑九、Next.js 适合什么样的项目Next.js 并不是所有场景的唯一选择。但它非常适合很多现代前端项目。例如1. 内容展示类网站比如个人博客文档站官网新闻资讯网站这类项目通常关心页面结构SEO首屏内容文章详情页2. 中小型业务应用比如后台管理系统内容管理面板商品展示和管理页面这类项目通常关心多页面组织数据获取表单提交组件复用3. 需要上线和持续维护的 React 项目如果一个项目不只是练习而是真的要部署、维护、扩展那么 Next.js 提供的工程能力会很有帮助。4. 什么时候不一定需要 Next.js如果只是一个非常小的练习组件一个只在本地跑的简单交互页面一个完全不需要路由和上线流程的小 demo那不一定非要上 Next.js。这一点也很重要学 Next.js 不是因为所有页面都必须用它而是因为它能帮你处理更完整的应用开发问题。十、纯 React 项目和 Next.js 项目最直观的区别当前阶段你可以先从几个角度粗略比较。1. 页面组织方式不同纯 React 项目里你通常需要自己配置或选择路由方案。Next.js 项目里页面组织通常和目录结构有更强关系。2. 框架能力范围不同React 更专注于用户界面。Next.js 不只关心界面还关心路由构建优化数据获取部署3. 数据获取位置更丰富纯 React 项目里很多数据请求通常发生在浏览器端。Next.js 则会让你逐步接触客户端获取数据服务端准备数据静态内容生成当前阶段你不用马上分清所有细节只要先知道Next.js 给 React 应用增加了更多组织数据和页面的方式。十一、第一个 Next.js 项目大概长什么样这一章我们不展开完整编码只先看一个非常粗略的项目结构感。一个 Next.js 项目可能会有类似这样的结构my-next-app/ ├── app/ │ ├── page.tsx │ ├── layout.tsx │ └── about/ │ └── page.tsx ├── public/ ├── package.json └── next.config.ts1.app/是什么当前阶段你可以先理解成这里放和页面路由、布局相关的内容。2.page.tsx是什么你可以先理解成一个页面入口。例如app/page.tsx可能对应首页app/about/page.tsx可能对应关于页3.layout.tsx是什么你可以先理解成多个页面共享的外层布局。比如统一的页面结构导航栏页脚下一章我们会正式展开路由和布局。十二、创建第一个 Next.js 项目时你会看到什么如果你要创建一个新的 Next.js 项目常见方式是pnpmcreate next-applatest my-next-app命令执行过程中工具可能会问你一些配置问题。比如是否使用TypeScriptESLintTailwind CSSsrc/目录App Router初学阶段你先不用对每个选项都很紧张。更推荐的思路是先用一套相对标准的配置跑起来再通过项目慢慢理解每个选项的意义。1. 为什么建议继续使用 TypeScript因为你前面已经学过 TypeScript而且在 React 阶段也已经开始用类型约束项目结构。继续使用 TypeScript可以让 Next.js 项目里的页面参数组件 props数据结构工具函数都更清楚。2. 为什么创建项目不是本章重点因为这一章的重点是“为什么学 Next.js”。真正创建项目、认识目录和页面我们会放到下一章继续展开。十三、初学阶段不要急着一次吃透所有渲染模式这是本章非常想提前帮你稳住节奏的一点。Next.js 里有很多容易让初学者紧张的概念。例如客户端渲染服务端渲染静态生成增量静态再生成服务端组件客户端组件这些都重要但不适合一开始全部塞进脑子里。更稳的学习顺序是先理解 Next.js 和 React 的关系。先学会页面路由和基础布局。再理解数据获取和页面渲染的场景差异。最后再逐步深入不同渲染方式的适用场景。你现在最需要先建立的是Next.js 是帮我组织完整 React 应用的一套框架。只要这个认知站稳了后面的细节会更容易接住。十四、学习 Next.js 时前面哪些知识会继续用到Next.js 不是新大陆从零开始。你前面学过的很多东西都会继续使用。1. HTML / CSS你仍然需要页面结构语义清楚样式布局合理响应式意识表单可用性2. JavaScript你仍然需要数组和对象处理函数拆分异步请求模块化事件处理3. TypeScript你仍然需要类型定义接口和类型别名函数参数和返回值类型组件 props 类型4. React你更会继续大量使用组件JSXpropsstate条件渲染列表渲染表单组件通信所以 Next.js 阶段不是换轨而是在前面所有基础之上继续学习更完整的项目组织方式。十五、这一阶段我们会怎么学 Next.js第五阶段不会一上来追求复杂全栈项目。我们会继续保持前面几阶段的学习节奏先理解再动手再复盘。这一阶段大致会围绕这些内容展开为什么学习 Next.js页面路由与基础布局数据获取与页面渲染基础组件复用、样式组织与公共模块表单、提交与基础后端交互意识项目优化与上线基础阶段综合实战个人博客或内容展示网站当前阶段你不用担心每个点都很大。我们会继续按纯小白能接受的节奏把每一步拆清楚。十六、这一章最容易产生的误解这一节建议你认真看。因为 Next.js 是一个很容易被术语包围的框架。1. 误解一Next.js 是 React 的替代品不是。Next.js 是基于 React 的框架。你在 React 阶段学过的内容仍然非常重要。2. 误解二学 Next.js 就必须马上懂服务端不需要。初学阶段先建立整体认知再慢慢理解服务端参与页面生成和数据获取的场景。3. 误解三Next.js 只适合大型项目也不是。个人博客、内容网站、中小型业务页面都很适合用它练习。4. 误解四只要用了 Next.js项目就自动高质量不是。框架提供能力但项目质量仍然取决于页面结构组件设计状态管理数据处理样式组织错误处理5. 误解五一开始就要把所有高级概念都学完也不是。当前阶段更重要的是先能用 Next.js 做出结构清晰、能运行、能部署的小项目。十七、本章实践练习这一章的练习重点不是马上写复杂功能而是建立 Next.js 的整体认知。1. 练习 1用自己的话解释 Next.js 和 React 的关系请你尝试回答React 主要解决什么问题Next.js 在 React 基础上又补了什么为什么它们不是替代关系这个练习会帮助你把学习路线想清楚。2. 练习 2列出一个网站至少需要哪些页面假设你要做一个个人博客请你列出首页文章列表页文章详情页关于页然后思考URL 地址和页面内容应该怎样对应这个练习是在为下一章的页面路由做准备。3. 练习 3创建第一个 Next.js 项目并运行如果你想提前动手可以执行pnpmcreate next-applatest my-next-appcdmy-next-apppnpmdev然后打开浏览器观察页面并尝试查看项目目录。这个练习的重点不是立刻改很多代码而是先感受Next.js 项目和普通 React 项目的目录结构有什么不同。4. 练习 4总结 Next.js 帮你省掉了哪些基础工作请你从下面几个角度写一段总结路由构建优化部署数据获取这个练习能帮助你真正理解为什么 Next.js 不是多此一举而是在补完整应用开发需要的能力。十八、学习重点提示这一章请你重点记住下面这些话Next.js 是一个基于 React 的应用开发框架。Next.js 不是替代 React而是在 React 基础上提供更完整的项目能力。React 更专注于构建用户界面Next.js 更关注如何组织完整应用。路由是 URL 和页面内容之间的对应关系是多页面网站非常重要的基础。Next.js 内置了很多构建、优化和部署相关能力能减少重复配置。Next.js 的服务端能力很重要但初学阶段不用一次吃透所有渲染模式。学 Next.js 时前面学过的 HTML、CSS、JavaScript、TypeScript、React 都还会继续用到。判断是否需要 Next.js要看项目是否需要更完整的页面、路由、数据和上线能力。如果你只记一句话请记住Next.js 的核心价值不是让你少学 React而是帮你把 React 页面组织成更完整、更适合上线维护的应用。十九、本章小结这一章我们正式进入了第五阶段Next.js。你已经理解了Next.js 和 React 的关系为什么学完 React 后会自然进入 Next.js为什么完整项目需要路由、构建、优化和部署能力为什么 Next.js 会提到服务端能力Next.js 适合哪些类型的项目纯 React 项目和 Next.js 项目的基本差异初学阶段为什么不需要一开始吃透所有渲染模式更重要的是你开始把学习重点从“我会写一个 React 组件”继续推进到“我如何组织一个结构完整、能访问、能维护、能上线的 React 应用”这个转变非常重要。因为从这里开始我们已经不只是学习界面组件本身而是在进入现代 React 应用开发框架的基础阶段。二十、课后思考题请你认真思考下面这些问题为什么说 Next.js 不是 React 的替代品React 更擅长解决什么问题Next.js 又补充了哪些项目能力为什么多页面网站一定离不开路由意识为什么真实项目会关心构建、优化和部署而不只是页面能显示为什么 Next.js 会需要一些服务端能力对初学者来说为什么不应该一上来就死磕所有渲染模式如果你要做一个个人博客你觉得 Next.js 能帮你解决哪些问题建议你把这些问题用自己的话写下来。只要你能把这些问题讲清楚说明你已经真正跨进 Next.js 阶段的大门了。二十一、下一篇预告下一章我们会正式进入从零开始学前端 | 第三十八章页面路由与基础布局你会开始真正接触 Next.js 项目里最基础、也最常用的内容路由是什么页面文件和 URL 地址有什么关系page.tsx和layout.tsx分别负责什么多页面网站怎样组织导航和基础布局也就是说下一章开始我们会从“为什么学习 Next.js”进一步走到真正开始搭建 Next.js 多页面项目的基础结构。