Leitfaden 10. Februar 2026 10 Min. Lesezeit

Ein SaaS in 48h erstellen: Schritt-für-Schritt-Leitfaden

Ein SaaS zu starten erfordert keine Monate der Entwicklung mehr. Mit den richtigen Tools — Next.js 14, Stripe, Prisma, Vercel — können Sie in 48h ein funktionsfähiges Produkt haben. Dieser Leitfaden detailiert jeden Schritt, vom ersten Commit bis zum Deployment in die Produktion.

Tag 1 — Die Grundlagen (Stunden 0-12)

Schritt 1: Projekt initialisieren

Beginnen Sie mit der Erstellung eines Next.js 14-Projekts mit TypeScript, Tailwind CSS und App Router:

npx create-next-app@14 mein-saas \
  --typescript --tailwind --eslint --app \
  --src-dir --import-alias "@/*"

cd mein-saas

# Wesentliche Abhängigkeiten installieren
npm install prisma @prisma/client next-auth
npm install stripe @stripe/stripe-js
npm install zod react-hook-form
npm install @neuraapi/sdk

Schritt 2: Datenbank konfigurieren

Prisma bietet eine intuitive ORM-Schicht. Initialisieren Sie sie mit PostgreSQL:

// prisma/schema.prisma
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model User {
  id        String   @id @default(cuid())
  email     String   @unique
  name      String?
  password  String
  plan      String   @default("starter")
  apiKey    String   @unique @default(cuid())
  createdAt DateTime @default(now())
  projects  Project[]
}

Schritt 3: Authentifizierung implementieren

NextAuth.js ist die Standardwahl für Next.js. Konfigurieren Sie es mit Anmeldeinformationen:

// src/lib/auth.ts
import NextAuth from 'next-auth'
import CredentialsProvider from 'next-auth/providers/credentials'
import { prisma } from './db'
import bcrypt from 'bcryptjs'

export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [
    CredentialsProvider({
      credentials: {
        email: { label: 'Email', type: 'email' },
        password: { label: 'Passwort', type: 'password' },
      },
      async authorize(credentials) {
        const user = await prisma.user.findUnique({
          where: { email: credentials?.email as string },
        })
        if (!user) return null
        const valid = await bcrypt.compare(
          credentials?.password as string, user.password
        )
        if (!valid) return null
        return { id: user.id, email: user.email, name: user.name }
      },
    }),
  ],
  session: { strategy: 'jwt' },
  pages: { signIn: '/login' },
})

Tag 2 — Abrechnung und Deployment

Schritt 4: Stripe integrieren

// src/app/api/stripe/checkout/route.ts
import { NextRequest, NextResponse } from 'next/server'
import { auth } from '@/lib/auth'
import Stripe from 'stripe'

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)

export async function POST(req: NextRequest) {
  const session = await auth()
  if (!session?.user) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
  }

  const { plan } = await req.json()
  const checkoutSession = await stripe.checkout.sessions.create({
    mode: 'subscription',
    payment_method_types: ['card'],
    customer_email: session.user.email!,
    line_items: [{ price: PLANS[plan].priceId, quantity: 1 }],
    success_url: `${process.env.NEXT_URL}/dashboard?success=true`,
    cancel_url: `${process.env.NEXT_URL}/pricing?canceled=true`,
    metadata: { userId: session.user.id, plan },
  })

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

Schritt 5: Auf Vercel deployen

# Vercel CLI installieren
npm i -g vercel

# Deployen
vercel

# Umgebungsvariablen konfigurieren
vercel env add DATABASE_URL
vercel env add NEXTAUTH_SECRET
vercel env add STRIPE_SECRET_KEY

# In Produktion deployen
vercel --prod

Zusammenfassung der 48 Stunden

1Stunden 0-4 — Projekt-Setup, Abhängigkeiten, Prisma-Datenbank

2Stunden 4-12 — NextAuth-Authentifizierung, Registrierung, Anmeldung

3Stunden 12-24 — Dashboard, Layout, Navigation, Einstellungen

4Stunden 24-36 — Stripe Checkout, Webhooks, Abonnementverwaltung

5Stunden 36-44 — Landing Page, SEO, Transaktions-E-Mails

6Stunden 44-48 — Tests, Vercel-Deployment, Monitoring

Benötigen Sie eine Abkürzung?

Die Vorlage NeuraSaaS enthält alles aus diesem Leitfaden vorkonfiguriert: Auth, Dashboard, Stripe, Landing Page, Admin-Panel. Sparen Sie 40h Entwicklung.

Preise ansehen →