The latest articles on DEV Community by Margot (@margot_orin). https://dev.to/margot_orin https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4215842%2Fa50e13d5-ea27-471c-8629-44c812f91b62.png https://dev.to/margot_orin en Margot Thu, 29 Oct 2026 18:02:41 +0000 https://dev.to/margot_orin/how-i-built-a-production-ready-ai-saas-boilerplate-with-nextjs-16-full-stack-breakdown-263e https://dev.to/margot_orin/how-i-built-a-production-ready-ai-saas-boilerplate-with-nextjs-16-full-stack-breakdown-263e <p>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.</p> <p>So I built <strong>ShipAI</strong> — a production-ready Next.js 16 boilerplate that has all of this pre-configured and ready to customize.</p> <h2> The Stack </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Layer</th> <th>Tech</th> </tr> </thead> <tbody> <tr> <td>Framework</td> <td>Next.js 16 (App Router, TypeScript, Turbopack)</td> </tr> <tr> <td>Auth</td> <td>NextAuth.js (Google, GitHub, email/password)</td> </tr> <tr> <td>Payments</td> <td>Stripe (subscriptions, webhooks, customer portal)</td> </tr> <tr> <td>Database</td> <td>Prisma + PostgreSQL</td> </tr> <tr> <td>AI</td> <td>Vercel AI SDK v4 (OpenAI + Anthropic)</td> </tr> <tr> <td>UI</td> <td>Tailwind CSS + 15 shadcn/ui components</td> </tr> <tr> <td>Email</td> <td>Resend</td> </tr> <tr> <td>Deploy</td> <td>Vercel (one-click)</td> </tr> </tbody> </table></div> <h2> Pre-Built Pages </h2> <ul> <li> <strong>Landing page</strong> — Hero, features grid, pricing cards, testimonials, FAQ</li> <li> <strong>Auth</strong> — Login + register with OAuth and email/password</li> <li> <strong>Dashboard</strong> — Stats cards, usage charts, recent activity</li> <li> <strong>AI Chat</strong> — Streaming chat with model/provider selector</li> <li> <strong>Billing</strong> — Plan comparison, Stripe portal integration</li> <li> <strong>Settings</strong> — Profile, notifications, security tabs</li> </ul> <p>48 files. 16 routes. Zero TypeScript errors.</p> <h2> Technical Decisions Worth Sharing </h2> <h3> AI SDK v4 is a breaking change </h3> <p>If you're upgrading from v3, heads up: <code>useChat</code> no longer exposes <code>input</code>, <code>handleInputChange</code>, or <code>append</code>. The new API uses <code>sendMessage</code> and a transport pattern (<code>DefaultChatTransport</code>). I spent time figuring this out so you don't have to.</p> <h3> Next.js 16 + Cache Components </h3> <p><code>export const dynamic = "force-dynamic"</code> no longer works with Cache Components enabled. Use <code>connection()</code> from <code>next/server</code> plus <code>export const instant = false</code> for dynamic server pages.</p> <h3> Stripe webhook handler needs upsert logic </h3> <p><code>checkout.session.completed</code> can fire before the subscription record exists in your database. Always use <code>prisma.subscription.upsert()</code> instead of separate create/update calls.</p> <h3> Prisma v5 &gt; v8 for boilerplates </h3> <p>Prisma v8 has a completely different CLI and is more of a platform play. For a developer-friendly boilerplate, Prisma v5 with the familiar <code>npx prisma generate</code> workflow is the right choice.</p> <h2> What You Get </h2> <ul> <li>Complete source code (48 TypeScript files)</li> <li>Comprehensive README + .env.example</li> <li>One-time purchase, unlimited projects</li> <li>30-day money-back guarantee</li> </ul> <p>If you're building AI SaaS products and want to skip the boilerplate phase:</p> <p>👉 <strong><a href="https://margotorin.gumroad.com/l/shipai" rel="noopener noreferrer">ShipAI — $199 on Gumroad</a></strong></p> <p>Happy to answer any questions about the architecture or technical decisions in the comments!</p> nextjs webdev ai typescript