我如何用 Next.js 16 建立可投入正式環境的 AI SaaS 樣板：全端拆解
How I Built a Production-Ready AI SaaS Boilerplate with Next.js 16 — Full Stack Breakdown
作者建立 ShipAI，這是一套預先配置並可自訂的 Next.js 16 AI SaaS 樣板，整合驗證、Stripe、資料庫及 AI 服務。它包含 48 個檔案和 16 條路由，使用 Vercel AI SDK v4、Prisma、PostgreSQL 等技術，並附有登入、帳戶管理、AI 聊天及付款等頁面。ShipAI 售價 $199，採一次性購買，可用於不限數量的項目。
Every time I started a new AI SaaS project, I spent the first 2-3 weeks on the same things: authentication, Stripe integration, database setup, AI provider plumbing. Over and over.
So I built ShipAI — a production-ready Next.js 16 boilerplate that has all of this pre-configured and ready to customize.
The Stack
| Layer | Tech |
|---|---|
| Framework | Next.js 16 (App Router, TypeScript, Turbopack) |
| Auth | NextAuth.js (Google, GitHub, email/password) |
| Payments | Stripe (subscriptions, webhooks, customer portal) |
| Database | Prisma + PostgreSQL |
| AI | Vercel AI SDK v4 (OpenAI + Anthropic) |
| UI | Tailwind CSS + 15 shadcn/ui components |
| Resend | |
| Deploy | Vercel (one-click) |
Pre-Built Pages
- Landing page — Hero, features grid, pricing cards, testimonials, FAQ
- Auth — Login + register with OAuth and email/password
- Dashboard — Stats cards, usage charts, recent activity
- AI Chat — Streaming chat with model/provider selector
- Billing — Plan comparison, Stripe portal integration
- Settings — Profile, notifications, security tabs
48 files. 16 routes. Zero TypeScript errors.
Technical Decisions Worth Sharing
AI SDK v4 is a breaking change
If you're upgrading from v3, heads up: useChat no longer exposes input, handleInputChange, or append. The new API uses sendMessage and a transport pattern (DefaultChatTransport). I spent time figuring this out so you don't have to.
Next.js 16 + Cache Components
export const dynamic = "force-dynamic" no longer works with Cache Components enabled. Use connection() from next/server plus export const instant = false for dynamic server pages.
Stripe webhook handler needs upsert logic
checkout.session.completed can fire before the subscription record exists in your database. Always use prisma.subscription.upsert() instead of separate create/update calls.
Prisma v5 > v8 for boilerplates
Prisma v8 has a completely different CLI and is more of a platform play. For a developer-friendly boilerplate, Prisma v5 with the familiar npx prisma generate workflow is the right choice.
What You Get
- Complete source code (48 TypeScript files)
- Comprehensive README + .env.example
- One-time purchase, unlimited projects
- 30-day money-back guarantee
If you're building AI SaaS products and want to skip the boilerplate phase:
Happy to answer any questions about the architecture or technical decisions in the comments!
來源：DEV Community · dev.to