SaaS Scaffolder

层级: 强大
类别: 产品团队
领域: 全栈开发 / 项目启动框架

---

输入格式

Product: [名称]
Description: [1-3句话]
Auth: nextauth | clerk | supabase
Database: neondb | supabase | planetscale
Payments: stripe | lemonsqueezy | none
Features: [逗号分隔列表]

---

文件树输出

my-saas/
├── app/
│ ├── (auth)/
│ │ ├── login/page.tsx
│ │ ├── register/page.tsx
│ │ └── layout.tsx
│ ├── (dashboard)/
│ │ ├── dashboard/page.tsx
│ │ ├── settings/page.tsx
│ │ ├── billing/page.tsx
│ │ └── layout.tsx
│ ├── (marketing)/
│ │ ├── page.tsx
│ │ ├── pricing/page.tsx
│ │ └── layout.tsx
│ ├── api/
│ │ ├── auth/[...nextauth]/route.ts
│ │ ├── webhooks/stripe/route.ts
│ │ ├── billing/checkout/route.ts
│ │ └── billing/portal/route.ts
│ └── layout.tsx
├── components/
│ ├── ui/
│ ├── auth/
│ │ ├── login-form.tsx
│ │ └── register-form.tsx
│ ├── dashboard/
│ │ ├── sidebar.tsx
│ │ ├── header.tsx
│ │ └── stats-card.tsx
│ ├── marketing/
│ │ ├── hero.tsx
│ │ ├── features.tsx
│ │ ├── pricing.tsx
│ │ └── footer.tsx
│ └── billing/
│ ├── plan-card.tsx
│ └── usage-meter.tsx
├── lib/
│ ├── auth.ts
│ ├── db.ts
│ ├── stripe.ts
│ ├── validations.ts
│ └── utils.ts
├── db/
│ ├── schema.ts
│ └── migrations/
├── hooks/
│ ├── use-subscription.ts
│ └── use-user.ts
├── types/index.ts
├── middleware.ts
├── .env.example
├── drizzle.config.ts
└── next.config.ts

---

关键组件模式

认证配置 (NextAuth)

typescript
// lib/auth.ts
import { NextAuthOptions } from next-auth
import GoogleProvider from next-auth/providers/google
import { DrizzleAdapter } from @auth/drizzle-adapter
import { db } from ./db

export const authOptions: NextAuthOptions = {
adapter: DrizzleAdapter(db),
providers: [
GoogleProvider({
clientId: process.env.GOOGLECLIENTID!,
clientSecret: process.env.GOOGLECLIENTSECRET!,
}),
],
callbacks: {
session: async ({ session, user }) => ({
...session,
user: {
...session.user,
id: user.id,
subscriptionStatus: user.subscriptionStatus,
},
}),
},
pages: { signIn: /login },
}

数据库模式 (Drizzle + NeonDB)

typescript
// db/schema.ts
import { pgTable, text, timestamp, integer } from drizzle-orm/pg-core

export const users = pgTable(users, {
id: text(id).primaryKey().$defaultFn(() => crypto.randomUUID()),
name: text(name),
email: text(email).notNull().unique(),
emailVerified: timestamp(emailVerified),
image: text(image),
stripeCustomerId: text(stripecustomerid).unique(),
stripeSubscriptionId: text(stripesubscriptionid),
stripePriceId: text(stripepriceid),
stripeCurrentPeriodEnd: timestamp(stripecurrentperiod_end),
createdAt: timestamp(created_at).defaultNow().notNull(),
})

export const accounts = pgTable(accounts, {
userId: text(user_id).notNull().references(() => users.id, { onDelete: cascade }),
type: text(type).notNull(),
provider: text(provider).notNull(),
providerAccountId: text(provideraccountid).notNull(),
refreshtoken: text(refreshtoken),
accesstoken: text(accesstoken),
expiresat: integer(expiresat),
})

Stripe 结账路由

typescript
// app/api/billing/checkout/route.ts
import { NextResponse } from next/server
import { getServerSession } from next-auth
import { authOptions } from @/lib/auth
import { stripe } from @/lib/stripe
import { db } from @/lib/db
import { users } from @/db/schema
import { eq } from drizzle-orm

export async function POST(req: Request) {
const session = await getServerSession(authOptions)
if (!session?.user) return NextResponse.json({ error: 未授权 }, { status: 401 })

const { priceId } = await req.json()
const [user] = await db.select().from(users).where(eq(users.id, session.user.id))

let customerId = user.stripeCustomerId
if (!customerId) {
const customer = await stripe.customers.create({ email: session.user.email! })
customerId = customer.id
await db.update(users).set({ stripeCustomerId: customerId }).where(eq(users.id, user.id))
}

const checkoutSession = await stripe.checkout.sessions.create({
customer: customerId,
mode: subscription,
paymentmethodtypes: [card],
line_items: [{ price: priceId, quantity: 1 }],
successurl: ${process.env.NEXTPUBLICAPPURL}/dashboard?upgraded=true,
cancelurl: ${process.env.NEXTPUBLICAPPURL}/pricing,
subscriptiondata: { trialperiod_days: 14 },
})

return NextResponse.json({ url: checkoutSession.url })
}

中间件

typescript
// middleware.ts
import { withAuth } from next-auth/middleware
import { NextResponse } from next/server

export default withAuth(
function middleware(req) {
const token = req.nextauth.token
if (req.nextUrl.pathname.startsWith(/dashboard) && !token) {
return NextResponse.redirect(new URL(/login, req.url))
}
},
{ callbacks: { authorized: ({ token }) => !!token } }
)

export const config = {
matcher: [/dashboard/:path, /settings/:path, /billing/:path*],
}

环境变量模板

bash

.env.example

NEXTPUBLICAPP_URL=http://localhost:3000
DATABASE_URL=postgresql://user:pass@ep-xxx.us-east-1.aws.neon.tech/neondb?sslmode=require
NEXTAUTH_SECRET=generate-with-openssl-rand-base64-32
NEXTAUTH_URL=http://localhost:3000
GOOGLECLIENTID=
GOOGLECLIENTSECRET=
STRIPESECRETKEY=sktest...
STRIPEWEBHOOKSECRET=whsec_...
NEXTPUBLICSTRIPEPUBLISHABLEKEY=pktest...
STRIPEPROPRICEID=price...

---

脚手架检查清单

以下阶段必须按顺序完成。在进入下一阶段前，验证当前阶段是否完成。

阶段 1 — 基础

• - [ ] 1. 使用 TypeScript 和 App Router 初始化 Next.js
• [ ] 2. 配置 Tailwind CSS 并设置自定义主题令牌
• [ ] 3. 安装并配置 shadcn/ui
• [ ] 4. 配置 ESLint + Prettier
• [ ] 5. 创建包含所有必需变量的 .env.example

✅ 验证: 运行 npm run build — 不应出现 TypeScript 或 lint 错误。
🔧 如果构建失败: 检查 tsconfig.json 路径，确保所有 shadcn/ui 的对等依赖已安装。

阶段 2 — 数据库

• - [ ] 6. 安装并配置 Drizzle ORM
• [ ] 7. 编写模式（users, accounts, sessions, verification_tokens）
• [ ] 8. 生成并应用初始迁移
• [ ] 9. 从 lib/db.ts 导出数据库客户端单例
• [ ] 10. 在本地环境中测试数据库连接

✅ 验证: 在测试脚本中运行简单的 db.select