技术栈详解
16.2 Next.js 餐厅的房子框架
餐厅比喻
想象你要开Twitter餐厅。第一件事是什么?
搭房子!
没有房子,餐厅开不起来。
传统的奇怪餐厅
想象一个奇怪的餐厅:
- 前厅(客人点菜的地方)在街这边
- 后厨(做菜的地方)在街那边
- 服务员要跑来跑去传菜单
问题:
- 服务员累死了
- 客人等很久
- 容易出错(菜单传丢了)
Next.js的餐厅
Next.js就像把前厅和后厨放在一个房子里!
- 厨师做好菜,直接端给客人
- 不用跑来跑去
- 超级快!
技术上,Next.js是什么?
Next.js是一个React框架,提供:
- 前端能力(做界面)
- 后端能力(处理数据)
- 路由系统(页面跳转)
- 构建工具(打包代码)
就像一个完整的餐厅房子,前厅后厨都有!
用Twitter来理解
Twitter的时间线功能
打开Twitter,你看到推文列表。
传统方式(前后分离):
- 前端:显示空白页面
- 前端:调用后端API
- 后端:查询数据库
- 后端:返回数据
- 前端:显示推文
Next.js方式(前后一体):
- 服务器:查询数据库
- 服务器:准备好完整页面
- 浏览器:直接显示
快3倍!
Next.js的超能力
超能力1:前后端一体
就像餐厅的前厅和后厨在一起:
- 不用写两份代码
- 不用来回传数据
- 开发速度快
超能力2:页面加载快
就像菜已经做好了:
- 客人来了直接吃
- 不用等现场做
- 用户体验好
超能力3:自动路由
就像餐厅的房间自动编号:
- 创建文件夹 = 创建路由
- 不用手动配置
- 简单方便
为什么Vibe Coding选Next.js?
- 开发速度快 - 前后端一体
- 性能好 - 页面加载快
- 部署简单 - 配合Vercel
- AI友好 - AI熟悉Next.js
记住这些要点
- Next.js = 餐厅的房子框架
- 前后端在一起(不用跑来跑去)
- 页面加载快(菜已经做好了)
- 自动路由(文件夹就是路由)
下一步
翻到16.3节,认识TypeScript - 餐厅的菜单检查员!