文档
开发指南技术栈

技术栈

🚀 Cheatsheet (快速执行)

目标: 2分钟了解整个技术栈，知道用了什么技术

核心技术栈:

前端: Next.js 15 + React + TypeScript + Tailwind CSS + Shadcn/ui
后端: Honojs + Prisma + PostgreSQL  
认证: Better Auth (支持多种登录方式)
支付: Stripe (订阅 + 一次性付款)
部署: Vercel (一键部署，也可以选择其他方式)
文档: Fumadocs

技术特色: 全栈 TypeScript、AI 友好、组件化开发、零配置部署

❓ 为什么选择这些技术

对 MVP 开发的价值:

  • 学习成本低: AI 对这些技术支持最好，问题解答最准确
  • 开发效率高: 一套代码搞定前后端，不用学多种语言
  • 部署简单: 推送代码自动部署，不用配置服务器
  • 扩展性好: 从小项目到大规模应用都能支撑

技术选择原则: 选择 2025 年最主流、最稳定的技术栈，确保长期维护和社区支持。

🤔 为什么是这个组合

我们的实战经验:

  • Next.js: 前后端一体化，学一个框架搞定全栈
  • TypeScript: AI 助手理解代码更准确，减少错误
  • PostgreSQL: 功能强大免费，云服务选择多
  • Vercel: 专为 Next.js 优化，部署体验最佳
  • Shadcn/ui: 组件库，复制粘贴即用
  • Honojs: 轻量级框架，适合 API 开发

对比其他方案:

# 我们的选择 vs 其他方案
Next.js vs Vue/Nuxt    - ⭐ 生态更成熟，AI 支持更好
TypeScript vs JavaScript - ⭐ 类型安全，开发体验更好  
PostgreSQL vs MySQL   - ⭐ 功能更强，JSON 支持更好
Vercel vs AWS         - ⭐ 部署更简单，零配置

🧠 简要原理 & 技术亮点

全栈架构: Next.js App Router → API Routes → Prisma → PostgreSQL

核心技术亮点:

  • 服务端组件: 默认在服务端渲染，性能更好
  • 类型安全: 从数据库到前端全链路类型安全
  • 组件化UI: shadcn/ui 复制粘贴即用
  • 零配置: 开箱即用，不需要复杂配置

🛠️ 技术栈详解

前端技术 (用户看到的界面)

Next.js 15:

  • 作用: 全栈 React 框架，处理路由、渲染、API
  • 优势: 文件即路由、自动优化、SEO 友好
  • 为什么选: 学一个框架搞定前后端

React + TypeScript:

  • 作用: 构建用户界面的组件库
  • 优势: 组件化开发、类型安全、生态丰富
  • 为什么选: AI 助手支持最好的前端技术

Tailwind CSS:

  • 作用: 原子化 CSS 框架，快速写样式
  • 优势: 不用想类名、响应式、暗色模式
  • 为什么选: AI 生成的样式代码最准确

后端技术 (数据和逻辑处理)

Prisma ORM:

  • 作用: 数据库操作工具，不用写 SQL
  • 优势: 类型安全查询、可视化管理、自动迁移
  • 为什么选: 像操作 JavaScript 对象一样操作数据库

PostgreSQL:

  • 作用: 关系型数据库，存储应用数据
  • 优势: 功能强大、开源免费、云服务多
  • 为什么选: 企业级稳定性，支持复杂查询

认证和支付

Better Auth:

  • 作用: 用户登录注册系统
  • 支持: 邮箱、社交登录、魔术链接、通行密钥
  • 为什么选: 现代化、类型安全、功能全面

🔧 开发工具链

包管理和构建

  • bun: 更快的包管理器
  • Biome: 代码格式化和检查
  • TypeScript: 类型检查和编译

开发体验

  • 热重载: 代码改动立即生效
  • 类型提示: VS Code 完整的自动补全
  • 错误检查: 编译时发现大部分错误

部署和监控

  • Vercel: 一键部署到全球 CDN
  • Vercel Analytics: 免费的网站分析
  • Edge Runtime: 边缘计算加速

📊 性能和扩展

性能优化

  • 服务端渲染: 首页加载更快
  • 代码分割: 按需加载 JavaScript
  • 图片优化: 自动格式转换和压缩
  • 缓存策略: 智能缓存提升速度

扩展能力

  • 数据库: PostgreSQL 支持水平扩展
  • CDN: 全球内容分发网络
  • 无服务器: 按需付费，自动扩容
  • 微服务: 可以拆分为独立服务

📎 延伸阅读

官方文档:

学习资源:

最佳实践:

下一步: 了解技术栈后，查看 [项目配置]./configuration) 来开始自定义你的项目。

下一步: 了解如何配置项目来开始使用这些技术。

网站开发计划与进度跟踪

社区官网的规划、开发进度和实时状态跟踪

项目配置

Next Page