1.2 技术栈概念

阅读完本节后，你将会收获：

•

理解技术栈的分层架构（前端、后端、数据库）

•

了解本教程采用的技术栈及其选择原因

•

掌握通过 package.json 快速识别项目技术栈

序言中提到的 TypeScript、Next.js 等名词，构成了现代 Web 开发的技术栈。

技术栈是什么

**技术栈（Tech Stack）**是开发项目时使用的技术组合。

现代 Web 应用分三层：

飞书文档 - 图片

•

前端：用户看到的界面（HTML、CSS、JavaScript）

•

后端：服务器端逻辑，处理数据（Node.js、Python）

•

数据库：存储数据（PostgreSQL、MongoDB）

本教程用的是 Next.js 全栈框架——前后端在同一个项目中，一个命令全部启动。

为什么选这套技术栈

这套技术栈是为 AI 原生开发选择的，核心原则：让 AI 更高效、让你更省钱。

AI 理解成本低

Next.js 全栈 = 前后端在同一个项目。传统方式需要两个项目、配置跨域、启动两个服务；Next.js 只需一个 pnpm dev。项目结构越统一，AI 生成的代码越不容易出错。

部署零成本

#aQMRBLGAfhcB text { white-space: pre; }#aQMRBLGAfhcB .fb0 { stroke: var(--N900-FG, 0.15); }#aQMRBLGAfhcB .fb0 {stroke: rgba(31,35,41, 0.15)}#aQMRBLGAfhcB .fx0 { stroke-miterlimit: 10; }#aQMRBLGAfhcB .fx0 {stroke-miterlimit: 10}#aQMRBLGAfhcB .fa1 { fill: rgb(187, 191, 196); }#aQMRBLGAfhcB .fa1 {fill: rgb(187, 191, 196)}#aQMRBLGAfhcB .fx1 { font: 400 12px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#aQMRBLGAfhcB .fx1 {font-style: normal}#aQMRBLGAfhcB .fx2 { text-anchor: middle; }#aQMRBLGAfhcB .fx2 {text-anchor: middle}#aQMRBLGAfhcB .fx3 { dominant-baseline: central; }#aQMRBLGAfhcB .fx3 {dominant-baseline: central}#aQMRBLGAfhcB .fx4 { stroke: none; }#aQMRBLGAfhcB .fx4 {stroke: none}#aQMRBLGAfhcB .fc0 { fill: var(--text-caption); }#aQMRBLGAfhcB .fc0 {fill: #646a73}#aQMRBLGAfhcB .fa2 { fill: var(--text-link-disabled); }#aQMRBLGAfhcB .fa2 {fill: rgb(187, 191, 196)}#aQMRBLGAfhcB .fa3 { fill: rgb(240, 238, 230); }#aQMRBLGAfhcB .fa3 {fill: rgb(240, 238, 230)}#aQMRBLGAfhcB .fx5 { font: 400 14px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#aQMRBLGAfhcB .fx5 {font-style: normal}#aQMRBLGAfhcB .fx6 { text-anchor: start; }#aQMRBLGAfhcB .fx6 {text-anchor: start}#aQMRBLGAfhcB .fx7 { dominant-baseline: alphabetic; }#aQMRBLGAfhcB .fx7 {dominant-baseline: alphabetic}#aQMRBLGAfhcB .fc1 { fill: rgb(115, 114, 108); }#aQMRBLGAfhcB .fc1 {fill: rgb(115, 114, 108)}#aQMRBLGAfhcB .fc2 { fill: rgb(61, 61, 58); }#aQMRBLGAfhcB .fc2 {fill: rgb(61, 61, 58)}#aQMRBLGAfhcB .fb1 { fill: var(--N900-FG, 0.15); }#aQMRBLGAfhcB .fb1 {fill: rgba(31,35,41, 0.15)}#aQMRBLGAfhcB .fb2 { fill: rgb(240, 238, 230); }#aQMRBLGAfhcB .fb2 {fill: rgb(240, 238, 230)}#aQMRBLGAfhcB .fa4 { fill: var(--bg-body); }#aQMRBLGAfhcB .fa4 {fill: #fff}AB123方案成本传统：租服务器本教程：Vercel/EdgeOne¥50-200/月免费

npm 生态：不重复造轮子

npm 是世界最大的开源代码仓库，有超过 200 万个包。

代码块

Plain Text

# 需要用户认证？

现成的pnpm add next-auth# 需要处理时间？

现成的pnpm add dayjs# 需要验证数据？

现成的pnpm add zod

AI 不会从零写代码，而是组合这些现成的"积木"。

PostgreSQL 有免费托管

#tckqOrWcqRqq text { white-space: pre; }#tckqOrWcqRqq .fb0 { stroke: var(--N900-FG, 0.15); }#tckqOrWcqRqq .fb0 {stroke: rgba(31,35,41, 0.15)}#tckqOrWcqRqq .fx0 { stroke-miterlimit: 10; }#tckqOrWcqRqq .fx0 {stroke-miterlimit: 10}#tckqOrWcqRqq .fa1 { fill: rgb(187, 191, 196); }#tckqOrWcqRqq .fa1 {fill: rgb(187, 191, 196)}#tckqOrWcqRqq .fx1 { font: 400 12px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#tckqOrWcqRqq .fx1 {font-style: normal}#tckqOrWcqRqq .fx2 { text-anchor: middle; }#tckqOrWcqRqq .fx2 {text-anchor: middle}#tckqOrWcqRqq .fx3 { dominant-baseline: central; }#tckqOrWcqRqq .fx3 {dominant-baseline: central}#tckqOrWcqRqq .fx4 { stroke: none; }#tckqOrWcqRqq .fx4 {stroke: none}#tckqOrWcqRqq .fc0 { fill: var(--text-caption); }#tckqOrWcqRqq .fc0 {fill: #646a73}#tckqOrWcqRqq .fa2 { fill: var(--text-link-disabled); }#tckqOrWcqRqq .fa2 {fill: rgb(187, 191, 196)}#tckqOrWcqRqq .fa3 { fill: rgb(240, 238, 230); }#tckqOrWcqRqq .fa3 {fill: rgb(240, 238, 230)}#tckqOrWcqRqq .fx5 { font: 400 14px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#tckqOrWcqRqq .fx5 {font-style: normal}#tckqOrWcqRqq .fx6 { text-anchor: start; }#tckqOrWcqRqq .fx6 {text-anchor: start}#tckqOrWcqRqq .fx7 { dominant-baseline: alphabetic; }#tckqOrWcqRqq .fx7 {dominant-baseline: alphabetic}#tckqOrWcqRqq .fc1 { fill: rgb(115, 114, 108); }#tckqOrWcqRqq .fc1 {fill: rgb(115, 114, 108)}#tckqOrWcqRqq .fc2 { fill: rgb(61, 61, 58); }#tckqOrWcqRqq .fc2 {fill: rgb(61, 61, 58)}#tckqOrWcqRqq .fb1 { fill: var(--N900-FG, 0.15); }#tckqOrWcqRqq .fb1 {fill: rgba(31,35,41, 0.15)}#tckqOrWcqRqq .fb2 { fill: rgb(240, 238, 230); }#tckqOrWcqRqq .fb2 {fill: rgb(240, 238, 230)}#tckqOrWcqRqq .fa4 { fill: var(--bg-body); }#tckqOrWcqRqq .fa4 {fill: #fff}AB123数据库免费托管平台PostgreSQLMySQLSupabase、Neon、Railway几乎没有

什么时候需要全栈？

如果只是纯静态展示（如公司官网），HTML + CSS 足够。当你的项目需要：

•

用户系统（登录、注册、权限）

•

数据持久化（保存用户数据）

•

业务逻辑（支付、通知、邮件）

就考虑全栈技术栈。

快速识别项目技术栈

接手新项目时，查看 package.json 就能快速了解技术栈：

知道技术栈后，你就知道：

•

项目是什么类型

•

需要哪些环境

•

遇到问题该搜索什么关键词

常见问题

Q1: 我需要理解这些技术吗？

知道它们是什么、解决什么问题即可，不需要会写。AI 会负责写代码，你只需要：

•

能看懂项目的结构

•

能描述你想要的功能

Q2: 为什么用 TypeScript 而不是 JavaScript？

TypeScript 在开发阶段就能发现错误，AI 会用它写代码。你只需要看到 .ts 后缀时知道这是 TypeScript 即可。

Q3: 和大学教的 Java/Python 有什么区别？

根本区别：大多数教程教你成为程序员，而这套教程教你用产品解决问题。AI 时代，你不需要成为程序员——你需要的是理解工具、描述需求、让 AI 帮你实现。