saas结构#
Data: 2026-04-24 21:58:11
项目目录结构#
saas-start/
├── .env # 本地环境变量配置
├── .env.example # 环境变量示例模板
├── .gitignore # Git 忽略文件列表
├── README.md # 项目说明文档
├── components.json # shadcn/ui 组件配置
├── drizzle.config.ts # Drizzle ORM 数据库配置
├── middleware.ts # Next.js 全局路由中间件
├── next.config.ts # Next.js 框架配置
├── next-env.d.ts # Next.js TypeScript 类型声明
├── package.json # 项目依赖和脚本配置
├── postcss.config.mjs # PostCSS 样式处理配置
├── react.md # React 学习笔记
├── tsconfig.json # TypeScript 编译配置
│
├── app/ # Next.js App Router 主目录
│ ├── favicon.ico # 网站图标
│ ├── faviconold.ico # 旧版网站图标备份
│ ├── globals.css # 全局样式和主题变量
│ ├── layout.tsx # 根布局组件
│ ├── not-found.tsx # 404 页面组件
│ │
│ ├── (dashboard)/ # 仪表盘路由组（需登录）
│ │ ├── layout.tsx # 仪表盘共享布局（导航栏）
│ │ ├── page.tsx # 首页/营销页面
│ │ ├── terminal.tsx # 首页动画终端组件
│ │ │
│ │ ├── dashboard/ # 仪表盘功能页面
│ │ │ ├── layout.tsx # 仪表盘侧边栏布局
│ │ │ ├── page.tsx # 团队设置主页
│ │ │ │
│ │ │ ├── activity/ # 活动日志
│ │ │ │ ├── loading.tsx # 加载状态组件
│ │ │ │ └── page.tsx # 活动日志页面
│ │ │ │
│ │ │ ├── general/ # 通用设置
│ │ │ │ └── page.tsx # 账户信息设置页
│ │ │ │
│ │ │ └── security/ # 安全设置
│ │ │ └── page.tsx # 密码修改/删账户页
│ │ │
│ │ └── pricing/ # 定价页面
│ │ ├── page.tsx # 定价方案展示页
│ │ └── submit-button.tsx # 订阅提交按钮组件
│ │
│ ├── (login)/ # 登录路由组（公开）
│ │ ├── actions.ts # 登录/注册 Server Actions
│ │ ├── login.tsx # 登录表单组件
│ │ │
│ │ ├── sign-in/ # 登录页面
│ │ │ └── page.tsx # 登录入口页面
│ │ │
│ │ └── sign-up/ # 注册页面
│ │ └── page.tsx # 注册入口页面
│ │
│ └── api/ # API 路由
│ ├── team/route.ts # 获取团队信息接口
│ ├── user/route.ts # 获取用户信息接口
│ │
│ └── stripe/ # Stripe 支付接口
│ ├── checkout/route.ts # 支付成功回调处理
│ └── webhook/route.ts # Stripe 订阅状态通知
│
├── components/ # React 组件库
│ ├── theme-provider.tsx # 主题切换 Provider
│ ├── theme-toggle.tsx # 深色模式切换按钮
│ │
│ └── ui/ # shadcn/ui 基础组件
│ ├── avatar.tsx # 用户头像组件
│ ├── button.tsx # 按钮组件
│ ├── card.tsx # 卡片容器组件
│ ├── dropdown-menu.tsx # 下拉菜单组件
│ ├── input.tsx # 输入框组件
│ ├── label.tsx # 表单标签组件
│ └── radio-group.tsx # 单选按钮组组件
│
├── lib/ # 核心业务逻辑
│ ├── utils.ts # 通用工具函数
│ │
│ ├── auth/ # 认证模块
│ │ ├── middleware.ts # 认证中间件/权限校验
│ │ └── session.ts # JWT 会话管理
│ │
│ ├── db/ # 数据库模块
│ │ ├── drizzle.ts # Drizzle ORM 客户端
│ │ ├── queries.ts # 数据库查询函数
│ │ ├── schema.ts # 数据表结构定义
│ │ ├── seed.ts # 测试数据填充脚本
│ │ ├── setup.ts # 数据库初始化脚本
│ │ │
│ │ └── migrations/ # 数据库迁移文件
│ │ ├── 0000_*.sql # 初始数据库结构
│ │ └── meta/ # 迁移元数据
│ │
│ └── payments/ # 支付模块
│ ├── actions.ts # 支付 Server Actions
│ └── stripe.ts # Stripe SDK 封装
│
└── doc/ # 项目文档
└── how-use.md # 修改攻略指南初学者入门指南#
第一步：理解请求流程#
用户访问网页 → middleware.ts 检查是否需要登录 → 路由到对应的 page.tsx → 页面组件调用 lib/ 里的函数 → 函数操作数据库 → 返回页面给用户。
建议学习顺序：先看 app/layout.tsx 理解页面骨架，再看 app/(login)/ 理解登录流程，最后看 lib/db/schema.ts 理解数据结构。
第二步：理解三大核心层#
页面层 (
app/)：用户看到的界面，每个文件夹对应一个 URL业务层 (
lib/)：处理逻辑，如登录验证、数据库操作、支付处理组件层 (
components/)：可复用的 UI 零件，如按钮、输入框
第三步：动手实践#
修改
app/layout.tsx里的title看效果在
lib/db/schema.ts添加一个新字段创建
app/test/page.tsx写一个新页面用
pnpm db:studio打开数据库可视化工具，看看真实数据
记住：Server Component 在服务器运行（可查数据库），Client Component 在浏览器运行（可交互）。文件顶部有 'use client' 就是 Client Component。