哈喽大家好，我是欧呦，这篇文章将为大家分享《从 0 到 1 学 Vibe Coding》的第二课：Vibe Coding 必备的研发与 AI 基础概念。
很多刚接触 AI 编程的朋友都会有一个疑问：现在 AI 写代码的能力已经这么强了，我们平时开发产品只需要在对话框里用自然语言提需求，一行代码都不用自己手敲，那为什么还要花时间去了解这些研发和 AI 的基础概念？
下面我们就先聊聊为什么懂一点基础概念能让你在 Vibe Coding 时少走很多弯路，再把做一个 AI 时代的个人开发者必须掌握的前端工程概念、前后端与网络存储概念，以及大模型 API 接入概念梳理清楚。
为什么不用手敲代码了，还是必须了解研发与 AI 基础概念？
1. 获得对产品的「掌握度」，在 AI 卡壳时能主动给出见解
在实际使用 AI 写代码时，不同模型的能力是有明显差距的。如果我们使用的是最顶尖的模型，做一个简单的展示页面，确实哪怕很多概念都不了解也能做出来；但如果我们平时想要节省开销，或者受限于条件没有办法随时用上最强的模型，情况就会完全不同。
当面对稍微复杂的任务、AI 没法写出符合预期的代码或者做出来的效果不好时，如果你懂基础的研发与 AI 概念，你就能作为主导者主动介入，直接给 AI 提出方向性的见解（比如提醒它「这里把组件拆出来」「这里接口返回改成 JSON 格式」）。更重要的是，我们要对自己做出来的东西有掌握度——如果你完全不知道它底下是怎么跑起来的，这个产品真要上线给别人用时，你心里会非常没有信心。
2. 任何长期运营的线上产品，都必须有一个懂研发概念的人盯着
我认为，任何一个已经上线的产品，如果想要长期稳定地运营下去，就一定要至少有一个懂研发概念的人在盯着——即便现在 AI 写代码已经很强了也是如此。
如果有人说自己真的是纯零代码基础、连基本的工程概念都不了解，却同时维护着好几个线上项目，那他的项目大概率是很不靠谱的。因为当你完全没有工程架构意识、也没有建立认真的代码检查（Review）流程，只是单纯让 AI 闷头堆代码时，前面一两个功能可能看起来很快，但等到你后续不断往上堆新功能的时候，就会发现每加一个功能都异常艰难：历史代码和上下文已经杂乱不堪，AI 自己读着都犯迷糊，而你自己又看不出结构问题在哪、给不出有效的修改洞察，整个开发过程就会变得非常煎熬。
3. 为什么实际做产品很少只用一个 HTML，而是首选 Next.js？
在 《了解 AI Agent 的常用操作》 里，我们介绍过可以让 AI 生成一个单文件 .html 来快速查看排版效果。但在实际做产品时，很少有一个单文件 HTML 就够用的情况——因为一个正常的产品起码要有完整的交互、多页面切换或者数据读写；如果从头到尾只有一个静态 HTML 文件，严格来说甚至算不上是一个真正的产品。
在绝大多数真实项目里，我们都会使用 Next.js 这类现代前端框架（所谓「框架」，就是一套已经帮你提前搭好标准文件夹结构和基础功能的工程骨架，不用从零砌砖；像大家熟悉的 Notion、Stripe、OpenAI 等知名产品的网页端，底层广泛使用的都是 React / Next.js 这套技术体系）。为什么在 Vibe Coding 时代我最推荐大家用 Next.js？核心有三个原因：
- 它是目前全球最主流、AI 最熟悉的框架：因为全球有海量的优秀开源项目是用
Next.js写的，大模型在训练时见过最多的就是它的代码，所以你让 AI 用Next.js写功能时，它最熟练、最不容易出错； - 天然对 SEO（搜索引擎收录）友好：做出来的网站更容易被 Google、Bing 等搜索引擎抓取到，为你带来免费的自然流量（具体原理我们在下一节马上拆解）；
- 支持「前后端一体」开发：在同一个
Next.js项目文件夹里，既可以写用户看到的网页界面，又可以直接写处理数据与调用大模型的后端接口，对于 AI Agent 在一个项目里统筹修改代码来说非常方便。
前端与工程结构核心概念：把页面和代码组织清楚
当我们让 AI 使用 Next.js 创建一个正式项目后，平时跟 AI 沟通需求或看它改代码时，最常遇到下面这四个核心工程概念：
1. 组件化（Component）与函数化（Function）
如果不加约束地让 AI 在一个文件里不停加代码，很快这个文件就会膨胀到几千行，AI 每次修改都要把几千行代码重新读一遍，既浪费 Token（大模型处理和计费文字的最小单位，可以简单理解成字或词块）又极易改坏其他地方。解决这个问题靠的就是组件化和函数化：
- 组件化（Component）：就是把前端页面上的各个模块（比如顶部导航栏、按钮、价格卡片、弹窗）单独抽出来，写成独立的小文件进行复用。这样做有两个直接好处：第一是可以大幅节省 Token（修改导航栏时 AI 只需要读导航栏这一个几十行的小文件）；第二是能够规范整个系统的设计，改一处按钮组件的样式，全站所有用到这个按钮的地方都会自动同步更新。
- 函数化（Function）：就是把项目里一些重复用到的代码逻辑封装在一起，起一个名字。比如网站里好几个地方都需要「把电脑底层的原始时间数字转换成『2026年10月30日』的显示格式」，或者「根据用户等级计算折扣后的价格」，让 AI 把这段逻辑封装成一个独立的函数，以后哪个页面需要算价格，直接调用这个函数名就行，不用把同样的计算代码到处复制粘贴。
2. JS（JavaScript） 与 TS（TypeScript） 的区别
要理解这两个词，我们先用一句话分清网页开发最基础的三剑客：
HTML：负责网页的骨架和文字内容（比如放一个标题、一个输入框、一个按钮）；CSS：负责网页长什么样（比如字号多大、什么颜色、间距多少）；JavaScript（简称JS）：是一门真正负责让网页「有交互逻辑」的编程语言——比如点击按钮后弹出提示框、切换深色模式、或者把用户输入的内容发给服务器，全都是靠JS实现的。
那什么是 TypeScript（简称 TS）？
简单来说，TS 就是在 JS 的基础上多加了一层「类型检查」的更严格的语法。 怎么理解「类型检查」有什么用？举个例子：假设我们在代码里写了一个计算订单总价的功能，规定传进来的「商品单价」必须是数字（number）。如果用普通的 JS，万一 AI 在另一个地方写代码时粗心传了一段文字（比如 "免费"）进来，写代码的时候根本不会报警，非要等用户真正在网页上点击结算、页面直接崩溃报错了才能发现；而如果用 TS，因为语法严格规定了这里只能传数字，AI 刚把代码写完的那一秒，代码检查工具就会立刻标红提醒它：「这里类型不对，不能把文字传给只接收数字的位置」。
这一点在今天尤其重要：在以前人类手写代码的时期，使用 TS 往往会增加写代码的复杂度和繁琐度；但在 AI 编程时期，我们根本不用关心这门语言写起来复不复杂（反正都是 AI 写），让 AI 统一使用更严格的 TS，反而能从代码层面大幅减少 AI 犯错的可能性，让它自己更好检查、在运行前就自动把低级错误修掉。
3. SSR（服务端渲染）、CSR（客户端渲染）与 SEO
很多朋友做出网站上线之后，当然希望别人在 Google 或百度搜索相关关键词时，能直接搜到自己的网站，从而源源不断地带来免费的自然流量。把网站做得更容易被搜索引擎搜到、排在更靠前的位置，就叫做 SEO（Search Engine Optimization，搜索引擎优化）。
那网站要怎么样才能被搜索引擎搜到呢？这就涉及到搜索引擎的「爬虫（Crawler）」是怎么工作的，以及 CSR 和 SSR 的区别：
- 搜索引擎爬虫的工作方式：Google、Bing 等搜索引擎每天都会派出成千上万个自动程序（也就是「爬虫」），顺着网址去访问你的网页源码，把页面里的标题、段落文字和链接读取下来，收录进搜索数据库里。
CSR（Client-Side Rendering，客户端渲染）的问题：早期的很多纯前端单页应用采用的是客户端渲染。当用户或爬虫访问网址时，服务器发过来的其实只有一个几乎空白的 HTML 空壳和一堆JS代码，要等用户的浏览器把JS下载并运行完之后，文字内容才会显示出来。这会导致两个问题：一是用户刚点开网页时会看到短暂的白屏加载；二是很多搜索引擎爬虫扫一眼发现 HTML 源码是个空壳，直接就离开了，根本抓不到你网页里的内容。SSR（Server-Side Rendering，服务端渲染）的优势：像Next.js默认支持的服务端渲染，是在用户或爬虫访问网址的那一刻，先在云端服务器上把标题、正文和数据全部拼成一份完整的 HTML 网页，再直接发送给浏览器。这样不仅用户点开链接瞬间就能看到排好版的文字，搜索引擎的爬虫一来也能一字不落地把页面上的所有文字抓走收录，对SEO获取自然流量非常友好。
4. 包管理器（npm）与项目配置清单（package.json）
我们在做项目时，不可能连日历选择器、图标、动画效果都让 AI 从零一行行写起，而是会直接使用社区里已经非常成熟的开源代码包（Package）。
npm（Node Package Manager）：就是帮我们把这些外部开源代码包下载、安装到当前项目文件夹里的命令行工具（比如你在终端里常看到 AI 自动运行npm install lucide-react，就是在用npm安装Lucide图标库）；package.json：固定放在项目根目录下的一个清单文件。打开它你会看到两部分核心信息：一是记录了「当前这个项目一共安装了哪些外部代码包、各自的版本号是多少」；二是定义了这个项目的常用快捷命令（比如运行npm run dev启动本地预览、运行npm run build打包上线）。只要有这个package.json文件在，哪怕换了一台新电脑，运行一行npm install就能把项目所需的所有外部代码包完整恢复出来。