1.2 技术栈概念 ​

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

• 理解技术栈的分层架构（前端、后端、数据库）
• 了解本教程采用的技术栈及其选择原因
• 掌握通过 package.json 快速识别项目技术栈

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

技术栈是什么 ​

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

现代 Web 应用分三层：

本教程的技术栈 ​

为什么选这套技术栈 ​

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

1. AI 理解成本低

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

2. 部署零成本

3. npm 生态：不重复造轮子

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

# 需要用户认证？现成的
pnpm add next-auth

# 需要处理时间？现成的
pnpm add dayjs

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

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

4. PostgreSQL 有免费托管

5. 什么时候需要全栈？

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

• 用户系统（登录、注册、权限）
• 数据持久化（保存用户数据）
• 业务逻辑（支付、通知、邮件）

就考虑全栈技术栈。

快速识别项目技术栈 ​

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

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

• 项目是什么类型
• 需要哪些环境
• 遇到问题该搜索什么关键词

常见问题 ​

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

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

• 能看懂项目的结构
• 能描述你想要的功能

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

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

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

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

相关内容 ​

• 详见：[1.1 代码格式演变]
• 详见：[1.3 浏览器与服务器基础]
• 后续：[1.5 Node.js 环境与包管理]