1.2 技术栈概念
Tip
理解Next.js、TypeScript、Tailwind这些工具各自解决什么问题,知道什么时候该用哪个工具。
1. 为什么需要这么多工具?
上一节你学会了组件化,知道要把代码拆分成独立的模块。
但你可能会困惑:为什么不能只用一个工具?为什么需要Next.js、TypeScript、Tailwind这么多东西?
用建房子来理解
想象你要盖一栋房子:
如果只有一个工具(锤子):
- 你可以敲钉子
- 但你无法切木头(需要锯子)
- 无法刷墙(需要油漆刷)
- 无法测量(需要卷尺)
结果:你根本盖不了房子。
如果有一套工具(工具箱):
- 锤子负责敲钉子
- 锯子负责切木头
- 油漆刷负责刷墙
- 卷尺负责测量
结果:每个工具各司其职,配合起来才能盖房子。
写代码也一样!
你需要一套配合使用的工具,这套工具有个专业的名字,叫技术栈(Tech Stack)。
2. 什么是技术栈?
技术定义
技术栈(Tech Stack):一组配合使用的开发工具和框架,用于构建完整的应用程序。
为什么叫"栈"?
因为这些工具是一层一层堆叠的:
- 最底层:数据库(存储数据)
- 中间层:后端框架(处理逻辑)
- 最上层:前端框架(显示界面)
就像盖房子:
- 最底层:地基
- 中间层:墙壁和柱子
- 最上层:屋顶和装修
3. Vibe Coding的技术栈:7个工具
我们为你挑选了地球上AI掌握最熟练、配合效率最高的7个工具。
为什么选这7个?
- AI最熟悉 - AI训练数据里有大量这些工具的代码
- 配合最好 - 这7个工具设计时就考虑了互相配合
- 社区最大 - 遇到问题容易找到答案
7个工具分别解决什么问题?
| 工具 | 解决什么问题 | 比喻 |
|---|---|---|
| 🏗️ Next.js | 如何组织整个项目?前端和后端怎么配合? | 房子的框架 |
| ✅ TypeScript | 如何防止写错代码? | 质检员 |
| 🎨 Tailwind CSS | 如何快速美化界面? | 油漆和装修工具 |
| 🪑 shadcn/ui | 如何快速获得好看的组件? | 现成的家具 |
| 📋 Prisma | 如何方便地操作数据库? | 仓库管理员 |
| 🗄️ PostgreSQL | 如何永久存储数据? | 仓库 |
| 🤖 Vercel AI SDK | 如何接入AI功能? | 智能助手 |
4. 每个工具详细介绍
1. Next.js - 房子的框架
它是什么?
- 一个基于React的Web应用框架
解决什么问题?
- 如何组织项目结构?
- 前端和后端如何配合?
- 如何实现页面路由?
为什么选它?
- 前后端一体,不用写两份代码
- AI对Next.js极其熟悉
- 部署简单(配合Vercel)
2. TypeScript - 质检员
它是什么?
- JavaScript的强类型超集
解决什么问题?
- 如何在写代码时就发现错误?
- 如何防止AI生成错误的代码?
为什么选它?
- 写代码时就检查错误,不用等运行
- AI生成的代码自动检查
- 智能提示,开发速度快
3. Tailwind CSS - 装修工具
它是什么?
- 原子化CSS框架
解决什么问题?
- 如何快速美化界面?
- 如何避免写CSS文件?
为什么选它?
- 不用切换文件,直接在HTML写样式
- AI生成Tailwind代码准确率高
- 响应式设计简单
4. shadcn/ui - 现成家具
它是什么?
- 一套设计精美的组件集合
解决什么问题?
- 如何快速获得好看的按钮、输入框?
- 如何保证界面看起来专业?
为什么选它?
- 质量高,设计专业
- 拥有源码,可以随便改
- 与Tailwind完美配合
5. Prisma - 仓库管理员
它是什么?
- 新一代ORM(对象关系映射)工具
解决什么问题?
- 如何方便地操作数据库?
- 如何避免写复杂的SQL?
为什么选它?
- 用TypeScript语法操作数据库
- 自动生成类型,防止拼错字段名
- AI很熟悉Prisma语法
6. PostgreSQL - 仓库
它是什么?
- 开源关系型数据库
解决什么问题?
- 如何永久存储用户数据?
- 如何保证数据不丢失?
为什么选它?
- 功能强大,支持复杂查询
- Vercel等云平台原生支持
- 免费额度足够用
7. Vercel AI SDK - 智能助手
它是什么?
- AI开发工具包
解决什么问题?
- 如何接入AI功能?
- 如何实现流式响应(打字机效果)?
为什么选它?
- 3行代码接入AI
- 支持多个AI提供商(OpenAI、Claude、Gemini)
- 流式响应开箱即用
5. 这7个工具如何配合?
用一个完整的流程来理解:
场景:用户在你的网站发一条推文
第1步:用户点击"发推文"按钮
- shadcn/ui - 提供好看的按钮组件
- Tailwind CSS - 让按钮有漂亮的样式
第2步:Next.js处理请求
- Next.js - 接收用户的请求
- TypeScript - 检查代码有没有错误
第3步:Prisma存储数据
- Prisma - 把推文数据发送到数据库
- PostgreSQL - 永久存储推文
第4步:AI生成回复(如果需要)
- Vercel AI SDK - 调用AI生成回复
看到了吗?一个简单的功能,需要7个工具配合!
6. 什么时候用这套技术栈?
| 场景 | 推荐方案 | 理由 |
|---|---|---|
| 📄 简单的个人简介页 | ❌ 不用Next.js,用HTML/CSS | 杀鸡焉用牛刀 |
| 🏢 SaaS系统/管理后台 | ✅ 用Next.js全套栈 | 需要严谨的权限管理和数据存储 |
| 🤖 AI对话应用 | ✅ 用Next.js + AI SDK | 这是Vibe Coding的主场 |
7. 避坑指南
| 你的想法 | ❌ 错误做法 | ✅ 正确做法 |
|---|---|---|
| "TypeScript报错太烦了" | 到处写any逃避检查 |
问AI帮你写对类型定义 |
| "Tailwind类名太长" | 试图抽离回CSS文件 | 接受它,安装IDE插件辅助阅读 |
| "我要自己写更好看的按钮" | 重复造轮子 | 直接用shadcn/ui,时间花在业务逻辑上 |
8. 真实案例:Instagram的技术栈选择
Story
2010年,2个工程师的奇迹
Instagram只有2个工程师,却在3个月内做出了能支持百万用户的应用。他们的秘诀:只选了3个配合最好的工具(Python + Django、PostgreSQL、AWS),而不是10种不同的工具。这让他们能专注于业务开发,而不是浪费时间解决工具之间的兼容问题。
Vibe心法:开始新项目时,先确定技术栈,写在README里。不要每次遇到问题就换工具,这会让项目变成工具的垃圾场。
9. 本章小结
- 🧰 技术栈是一套配合使用的工具 - 就像工具箱,每个工具各司其职
- 🎯 Vibe Coding选了7个工具 - Next.js、TypeScript、Tailwind、shadcn/ui、Prisma、PostgreSQL、Vercel AI SDK
- ⚡ 每个工具解决特定问题 - 不是为了炫技,而是为了高效开发
- 🤝 这7个工具配合最好 - AI最熟悉,社区最大,部署最简单