≈567 tokens on demand. Your agent reads this file only when SKILL.md points to it.
Next.js SaaS Template
Tech Stack
| Component |
Technology |
| Framework |
Next.js 14 (App Router) |
| Auth |
NextAuth.js v5 |
| Payments |
Stripe |
| Database |
PostgreSQL + Prisma |
| Email |
Resend |
| UI |
Tailwind (ASK USER: shadcn/Headless UI/Custom?) |
Directory Structure
project-name/
├── prisma/
├── src/
│ ├── app/
│ │ ├── (auth)/ # Login, register
│ │ ├── (dashboard)/ # Protected routes
│ │ ├── (marketing)/ # Landing, pricing
│ │ └── api/
│ │ ├── auth/[...nextauth]/
│ │ └── webhooks/stripe/
│ ├── components/
│ │ ├── auth/
│ │ ├── billing/
│ │ └── dashboard/
│ ├── lib/
│ │ ├── auth.ts # NextAuth config
│ │ ├── stripe.ts # Stripe client
│ │ └── email.ts # Resend client
│ └── config/
│ └── subscriptions.ts
└── package.json
SaaS Features
| Feature |
Implementation |
| Auth |
NextAuth + OAuth |
| Subscriptions |
Stripe Checkout |
| Billing Portal |
Stripe Portal |
| Webhooks |
Stripe events |
| Email |
Transactional via Resend |
Database Schema
| Model |
Fields |
| User |
id, email, stripeCustomerId, subscriptionId |
| Account |
OAuth provider data |
| Session |
User sessions |
Environment Variables
| Variable |
Purpose |
| DATABASE_URL |
Prisma |
| NEXTAUTH_SECRET |
Auth |
| STRIPE_SECRET_KEY |
Payments |
| STRIPE_WEBHOOK_SECRET |
Webhooks |
| RESEND_API_KEY |
Email |
Setup Steps
npx create-next-app {{name}} --typescript --tailwind --app- Install:
npm install next-auth @auth/prisma-adapter stripe resend
- Setup Stripe products/prices
- Configure environment
npm run db:pushnpm run stripe:listen (webhooks)npm run dev
Best Practices
- Route groups for layout separation
- Stripe webhooks for subscription sync
- NextAuth with Prisma adapter
- Email templates with React Email
