tech-stack-decision-maker

技术栈决策指南

别再猜了。通过有理有据的分析，获得可靠的技术建议。

此技能的功能

描述项目需求，此技能便会推荐：

✅ 精确的技术栈 - 为前端、后端、数据库和托管提供具体技术建议 ✅ 每项选择的理由 - 清晰说明选择如何满足项目需求 ✅ Claude Code 提示词 - 可直接使用的提示词，助你基于此技术栈构建项目 ✅ 部署策略 - 托管位置和方式 ✅ 成本明细 - 客户每月/每年需要支付的费用 ✅ 替代方案 - 何时考虑其他选项

适用对象

软件定制从业者，他们：

• 面对技术选择时感到无所适从
• 希望自信地向客户提供建议
• 需要以专业方式说明技术决策的理由
• 想使用现代且适合 AI 的技术栈
• 希望避免选错技术栈，导致不得不重建项目

如何使用此技能

输入格式

输入示例：

Project: Fire inspection management system

Requirements:
- Web app for office staff (desktop primarily)
- Mobile-friendly interface for field inspectors
- User authentication with different roles (admin, inspector)
- Database for buildings, inspections, users
- File uploads (photos from inspections)
- PDF report generation
- Email notifications
- Real-time dashboard

Expected Users: 10-15 concurrent users max
Data Volume: ~200 inspections/month, growing slowly
Budget: Mid-range (client can afford hosting, but not enterprise costs)
Timeline: Need to launch in 4-6 weeks

输出格式

---

技术栈建议：消防检查管理系统

推荐技术栈（现代且适合 AI）

Frontend:     Next.js 14 (React framework)
Backend:      Next.js API Routes
Database:     PostgreSQL (via Supabase)
Auth:         Supabase Auth
File Storage: Supabase Storage
Hosting:      Vercel
Styling:      Tailwind CSS

---

为什么选择此技术栈？

✅ Next.js 14（前端 + 后端）

理由：

• 一体化： 前端和后端位于同一代码库中（Claude Code 构建起来更简单）
• 快速开发： React 组件 + 内置路由 = 快速构建
• 适合移动设备： 默认支持响应式设计
• 适合 SEO： 按需使用服务器端渲染
• Claude Code 的首选： 文档广泛，Claude 能完美处理

最适合： 同时需要 Web 界面和 API 逻辑的项目

替代方案： 如果 API 需要供多个前端使用，可选择独立的 React + Express

---

✅ PostgreSQL（通过 Supabase）

理由：

• 关系型数据： 项目中的关系很明确（建筑 → 检查 → 用户）
• 强大可靠： 可处理复杂查询、事务并保证数据完整性
• Supabase = 托管服务： 无需为数据库管理操心
• 内置功能： 实时订阅、行级安全、自动生成的 REST API
• 价格实惠： 小型项目可使用免费套餐，生产环境每月 $25

最适合： 具有结构化数据和关联关系的项目

替代方案： 如果数据结构非常灵活或尚未定义，可选择 MongoDB

---

✅ Supabase（身份验证 + 存储 + 数据库）

理由：

• 完整的后端： 身份验证、数据库和存储集于一体
• 快速设置： 无需配置后端服务
• 默认安全： 行级安全策略可保护数据
• 包含文件存储： 可轻松处理照片上传
• 文档出色： Claude Code 熟悉如何与其集成

最适合： 不需要复杂自定义后端逻辑的项目

替代方案： Firebase（功能类似，属于 Google 生态系统）；如果逻辑复杂，则可选择自定义后端

---

✅ Vercel（托管）

理由：

• 专为 Next.js 打造： 部署无缝衔接（真的只需点击一下）
• 自动部署： 推送到 GitHub 即可立即部署
• 边缘网络： 全球访问速度快（内置 CDN）
• 免费套餐： 优惠充足（非常适合小型项目）
• 轻松使用自定义域名： 配置客户的域名非常简单

最适合： Next.js 项目（由同一家公司打造）

替代方案： 如果使用非 Next.js 技术栈，可选择 Railway 或 Render

---

✅ Tailwind CSS（样式）

理由：

• 快速编写样式： 实用类 = 快速开发 UI
• 内置响应式设计： 默认适合移动设备
• 设计一致： 在 HTML 中构建设计系统
• Claude Code 的偏好： 大多数 AI 代码生成都会使用 Tailwind

最适合： 快速原型开发和现代 UI 设计

替代方案： 如果更偏好，可选择纯 CSS 或 styled-components

---

完整技术栈拆解

层级	技术	月费	选择原因
前端	Next.js 14	免费（已包含在托管费用中）	一体化 React 框架，开发速度快
后端	Next.js API Routes	免费（已包含在托管费用中）	后端逻辑与前端位于同一代码库
数据库	PostgreSQL（Supabase）	$25	关系型数据，托管服务
身份验证	Supabase Auth	已包含	安全的用户登录，基于角色的访问控制
文件存储	Supabase Storage	已包含	用于检查的照片上传
托管	Vercel	$20（Pro 计划）	无缝部署 Next.js
域名	自定义域名	$12/年（约 $1/月）	客户的品牌化网址
电子邮件	Resend 或 SendGrid	$0-10	事务性电子邮件（通知）
总计		约 $46-56/月	中等价位，可扩展

年度费用：约 $552-672/年

---

适用于此技术栈的 Claude Code 提示词

1. 项目初始化

Create a Next.js 14 project with TypeScript, Tailwind CSS, and ESLint.
Use the App Router (not Pages Router).
Set up folder structure: /app, /components, /lib, /types, /public.

2. Supabase 设置

Install Supabase client library.
Create a Supabase project and get the project URL and anon key.
Set up environment variables for NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY.
Create a Supabase client utility function in /lib/supabase.ts.

3. 数据库架构

In Supabase, create the following PostgreSQL tables:
- users (id, email, role, created_at)
- buildings (id, name, address, client_name, inspection_frequency, created_at)
- inspections (id, building_id, inspector_id, scheduled_date, status, notes, created_at)

Set up foreign key relationships:
- inspections.building_id → buildings.id
- inspections.inspector_id → users.id

Create row-level security (RLS) policies so users can only see their own data.

4. 身份验证

Implement Supabase authentication with email/password.
Create a login page at /login and signup page at /signup.
Add middleware to protect routes (redirect to /login if not authenticated).
Store user session in cookies for persistence.

5. 仪表板页面

Create a dashboard page at /dashboard.
Show today's inspections, upcoming inspections, and overdue inspections.
Use Supabase to fetch data with real-time subscriptions.
Style with Tailwind CSS - use cards and a clean layout.

6. 建筑物管理

Create a page at /buildings that shows a list of all buildings.
Add search and filter functionality.
Create a form to add/edit buildings with fields: name, address, client_name, inspection_frequency.
Implement CRUD operations using Supabase.

7. 检查安排

Create an inspection scheduling page at /inspections/new.
Form fields: building (dropdown), inspector (dropdown), scheduled_date (date picker).
On submit, create a new inspection record in Supabase.
Show success notification and redirect to dashboard.

8. 文件上传

Add photo upload functionality to inspection forms.
Use Supabase Storage to handle file uploads.
Create a storage bucket called "inspection-photos".
Allow inspectors to upload multiple photos per inspection.
Display uploaded photos in a grid with lightbox functionality.

9. PDF 报告生成

Install @react-pdf/renderer library.
Create a PDF template for inspection reports that includes:
- Company logo and branding
- Building and client information
- Inspection details and results
- Photos (if any)
Generate PDF on demand when user clicks "Download Report" button.

10. 电子邮件通知

Install Resend library for sending emails.
Create API route at /api/send-email.
Send email when:
- Inspection is scheduled (notify inspector)
- Inspection is completed (notify client)
Use email templates with dynamic data (building name, date, etc).

---

部署步骤

步骤 1：推送到 GitHub

git init
git add .
git commit -m "Initial commit"
git remote add origin [your-github-repo-url]
git push -u origin main

步骤 2：连接 Vercel

1. 前往 vercel.com 并注册
2. 点击“Import Project”
3. 连接你的 GitHub 代码库
4. Vercel 会自动检测 Next.js 并配置构建设置

步骤 3：在 Vercel 中添加环境变量

• NEXT_PUBLIC_SUPABASE_URL = [你的 Supabase 项目 URL]
• NEXT_PUBLIC_SUPABASE_ANON_KEY = [你的 Supabase anon key]
• RESEND_API_KEY = [你的 Resend API key]

步骤 4：部署

• Vercel 会在每次推送到 main 分支时自动部署
• 生产环境 URL：your-project.vercel.app

步骤 5：自定义域名

• 在 Vercel 仪表板中，前往 Settings → Domains
• 添加客户的自定义域名（例如，inspections.clientcompany.com）
• 按照 DNS 配置说明操作

部署总耗时： 10-15 分钟

---

何时使用替代方案

在以下情况使用 MongoDB 替代 PostgreSQL：

• ❌ 数据结构变化很大／难以预测
• ❌ 需要极高的架构灵活性
• ❌ 存储大量嵌套 JSON 对象

示例： 用户生成内容类型多样的社交媒体应用

在以下情况使用 Firebase 替代 Supabase：

• ❌ 客户已深度使用 Google 生态系统
• ❌ 需要集成 Google Cloud
• ❌ 想要使用 Firestore 的离线优先移动 SDK

示例： 需要离线功能的移动应用

在以下情况使用 React + Express 替代 Next.js：

• ❌ 后端逻辑非常复杂（包含大量业务规则）
• ❌ 需要供移动应用和 Web 应用调用的独立 API
• ❌ 团队已经熟悉 Express

示例： 业务逻辑错综复杂的 ERP 系统

在以下情况使用 Render/Railway 替代 Vercel：

• ❌ 使用 Next.js 以外的后端（例如 Django、Rails）
• ❌ 需要更多服务器配置控制权
• ❌ 想在同一平台托管数据库和应用

示例： Python/Django 项目

---

技术栈复杂度等级

🟢 适合初学者（推荐新手软件定制开发者使用）

技术栈： Next.js + Supabase + Vercel + Tailwind 原因： 配置最少，文档优秀，Claude Code 能完美处理 最适合： 80% 的 B2B 软件项目

🟡 中级

技术栈： React + Node.js/Express + PostgreSQL + AWS/Railway 原因： 控制力更强，前后端分离 最适合： 后端逻辑复杂或已有基础设施的项目

🔴 高级（非必要时应避免）

技术栈： 自定义微服务 + GraphQL + Kubernetes + AWS 原因： 对大多数项目而言过于复杂，维护成本高 最适合： 对规模有极高要求的企业系统

对于软件定制开发者： 除非客户有特殊需求，否则坚持使用 🟢 适合初学者的技术栈

---

技术栈警示

除非有充分理由，否则请避免使用以下技术：

❌ PHP/WordPress - 已过时，难以维护，Claude Code 使用起来也比较吃力
❌ Ruby on Rails - 不太常见，Claude Code 的示例也较少
❌ Angular - 比 React 更复杂，学习曲线更陡
❌ MySQL - 对现代项目来说，PostgreSQL 更好
❌ 共享主机 - 速度慢、不可靠，建议改用云平台
❌ 所有服务都自托管 - 维护起来简直是一场噩梦，建议使用托管服务

---

快速技术栈推荐

简单的 CRUD 应用（基本数据管理）：

• Next.js + Supabase + Vercel
• 费用：每月 $25-50
• 构建时间：2-3 周

移动优先的现场服务：

• Next.js（响应式）+ Supabase + Vercel
• 在开发原生移动应用之前，可以考虑 PWA（渐进式 Web 应用）
• 费用：每月 $25-50
• 构建时间：3-4 周

复杂的项目管理：

• Next.js + Supabase + Vercel + 高级功能（Stripe、Twilio、SendGrid）
• 费用：每月 $50-100
• 构建时间：6-8 周

电子商务 / 客户门户：

• Next.js + Supabase + Stripe + Vercel
• 费用：每月 $50-100（另加 Stripe 费用）
• 构建时间：4-6 周

---

请记住

最好的技术栈应当：

1. ✅ 简单 - 组成部分越少，漏洞就越少
2. ✅ 文档完善 - Claude Code 才能有效提供帮助
3. ✅ 使用托管服务 - 维护越少，构建时间就越多
4. ✅ 经济高效 - 对大多数 B2B 项目来说，每月费用低于 $100
5. ✅ 经过验证 - 使用经过实战检验的技术，而非最前沿的技术

80% 项目的默认推荐方案： Next.js + Supabase + Vercel + Tailwind

这套技术栈现代、适合 AI、价格实惠且可扩展。

别再过度纠结技术选型了。就用这套技术栈，快速构建，赚取收入。