技术栈是什么
「技术栈」指一个项目用到的所有技术组合,像叠在一起的积木,每层负责一件事。看一个项目的技术栈,就能大致了解它怎么构建、怎么运行。
本站的技术栈:
| 层 | 技术 | 负责什么 |
|---|---|---|
| 前端框架 | Next.js + React | UI 渲染、路由 |
| 样式 | Tailwind CSS | 颜色、布局 |
| 语言 | TypeScript | 类型安全 |
| 后端 | Next.js Server Actions | 业务逻辑 |
| 数据库 | Supabase (PostgreSQL) | 存数据 |
| 认证 | Supabase Auth | 登录注册 |
| 部署 | Vercel | 全球 CDN |
这七层组合起来,就是一个完整的全栈应用。
前端栈:用户看到的部分
前端栈负责界面:用户看到的按钮、文字、动画。常见组合:
- **React 栈**:React + Next.js + Tailwind CSS + TypeScript
- **Vue 栈**:Vue + Nuxt.js + UnoCSS + TypeScript
- **原生栈**:HTML + CSS + JavaScript(不用框架,适合简单页面)
前端栈的选择主要看项目复杂度。简单展示页面用原生就够,复杂交互应用用框架。
后端栈:服务器上的逻辑
后端栈负责业务逻辑、数据存储、用户认证。常见组合:
- **Node.js 栈**:Express/Nest.js + PostgreSQL + Prisma
- **Python 栈**:Django/FastAPI + PostgreSQL + SQLAlchemy
- **Java 栈**:Spring Boot + MySQL + MyBatis
后端栈的选择看团队熟悉度和性能要求。Node.js 栈的好处是前后端用同一种语言(JavaScript/TypeScript)。
全栈框架:前后端一体
传统做法是前端和后端分开两个项目。全栈框架把它们合在一起:
- **Next.js**:React 全栈,前端后端同一个项目。
- **Nuxt.js**:Vue 全栈。
- **SvelteKit**:Svelte 全栈。
全栈框架的好处:
- **一套代码**:前后端共享类型、工具函数。
- **简化部署**:一个项目部署一次。
- **开发体验好**:不用在两个项目间切换。
本站就是全栈:Next.js 同时处理前端渲染和后端逻辑(Server Actions),数据库用 Supabase。
数据库栈
数据库通常单独算一层:
- **关系型**:PostgreSQL、MySQL。用表存数据,SQL 查询。适合结构化数据。
- **非关系型**:MongoDB、Redis。灵活结构,适合非结构化或缓存。
本站用 PostgreSQL(通过 Supabase),是关系型。
部署栈
代码写完,要部署到服务器:
- **Vercel**:Next.js 官方平台,零配置部署,全球 CDN。
- **Netlify**:静态站点和 Serverless。
- **Cloudflare Pages**:边缘计算,速度快。
- **自建服务器**:VPS + Nginx,完全控制但要自己运维。
本站部署在 Vercel:推送代码到 GitHub,Vercel 自动构建并部署到全球 CDN。
怎么看懂一个技术栈
看到别人项目的技术栈,问三个问题:
- **前端用什么**:React?Vue?原生?
- **后端用什么**:Node.js?Python?Java?还是全栈框架?
- **数据存哪**:PostgreSQL?MongoDB?Supabase?
这三个答案组合起来,就是项目的技术骨架。理解了技术栈,你就能快速判断一个项目「用什么做的」「怎么跑的」。