How to Build an AI SaaS App with Next.js 15 in 2026

Building an AI SaaS in 2026 is more accessible than ever, but the boilerplate is still painful. Auth, billing, rate limiting, streaming AI responses, admin dashboards - there is a lot to wire up before you write a single line of product code.

This guide walks through the architecture of a production-ready AI SaaS and shows you how to ship one in days instead of months.

The Stack

• Framework: Next.js 15 with App Router and React 19
• Auth: Auth.js v5 (NextAuth) with Google, GitHub, email providers
• Payments: Stripe with subscription webhooks
• AI: Vercel AI SDK with streaming (OpenAI, Anthropic, or any provider)
• Database: PostgreSQL with Drizzle ORM
• Styling: Tailwind CSS 4
• Deploy: Vercel or any Node.js host

1. Project Structure

A well-organized AI SaaS has these key directories:

src/
  app/
    (auth)/        # Login, register, forgot password
    (dashboard)/   # Main app, chat, settings
    (admin)/       # Admin panel, user management
    api/
      auth/        # NextAuth routes
      chat/        # AI streaming endpoint
      webhooks/    # Stripe webhook handler
  lib/
    auth.ts        # Auth config
    stripe.ts      # Stripe helpers
    ai.ts          # AI provider config
    db/            # Drizzle schema + migrations

2. Authentication

Auth.js v5 makes multi-provider auth straightforward. The key is setting up proper session callbacks to include the user role and subscription tier:

// src/lib/auth.ts
export const authConfig = {
  providers: [Google, GitHub, Email],
  callbacks: {
    session({ session, user }) {
      session.user.role = user.role
      session.user.tier = user.subscriptionTier
      return session
    }
  }
}

3. Stripe Billing

The billing flow needs three pieces: checkout session creation, webhook handling, and tier-based access control.

Key webhook events to handle:

• checkout.session.completed - Activate subscription
• customer.subscription.updated - Plan changes
• customer.subscription.deleted - Cancellations
• invoice.payment_failed - Payment issues

4. AI Chat with Streaming

The Vercel AI SDK handles streaming elegantly. Your API route streams tokens as they arrive:

// src/app/api/chat/route.ts
export async function POST(req) {
  const { messages } = await req.json()
  const session = await auth()
  
  // Check daily usage limits based on tier
  const usage = await getDailyUsage(session.user.id)
  if (usage >= TIER_LIMITS[session.user.tier]) {
    return new Response("Daily limit reached", { status: 429 })
  }

  const result = streamText({
    model: openai("gpt-4o"),
    messages,
  })
  
  return result.toDataStreamResponse()
}

5. Rate Limiting and Usage Tracking

Every AI SaaS needs usage limits per tier. Track daily message counts in your database and enforce limits in middleware or the API route. Typical tiers:

• Free: 10 messages/day
• Pro ($19/mo): 500 messages/day
• Enterprise ($49/mo): Unlimited + priority

6. Admin Dashboard

An admin panel lets you monitor users, revenue, and usage. Key metrics to track: DAU, messages sent, conversion rate from free to paid, MRR.

7. Deployment Checklist

1. Set up PostgreSQL (Neon, Supabase, or Railway)
2. Configure Stripe webhooks for your production domain
3. Set environment variables for all providers
4. Run database migrations
5. Deploy to Vercel with npx vercel --prod
6. Test the full flow: signup, subscribe, chat, cancel

Conclusion

Building an AI SaaS is mostly plumbing. The AI part is the easy bit - it is the auth, billing, rate limiting, and admin tooling that eats your time. Use a proven template to skip the boring parts and focus on what makes your product unique.