NeuraAPI
Guide 20 juin 2026 15 min de lecture

Comment créer un SaaS avec Next.js en 48h

Partager :

Le SaaS (Software as a Service) est le modèle économique dominant pour les produits numériques. Mais créer un SaaS from scratch peut sembler intimidant. La bonne nouvelle ? Avec Next.js 14, Stripe, Prisma et Vercel, vous pouvez avoir un produit fonctionnel en 48 heures. Ce guide détaille chaque étape, du premier commit au déploiement.

Prérequis

  • Connaissances de base en React et TypeScript
  • Node.js 18+ installé
  • Un compte Vercel (gratuit)
  • Un compte Stripe (gratuit en mode test)
  • Un compte NeuraAPI pour l'intégration IA

Pourquoi Next.js pour un SaaS ?

Next.js 14 combine le rendu serveur (SSR), le rendu statique (SSG) et les API routes dans un seul framework. Pour un SaaS, c'est idéal : votre landing page est ultra-rapide (SSG), votre dashboard est dynamique (SSR), et vos endpoints d'authentification vivent dans le même projet (API routes). Pas besoin de monter un backend séparé.

Le App Router de Next.js 14 offre en plus le streaming server-side, les layouts imbriqués et les Server Components. Résultat : moins de JavaScript côté client, des performances meilleures, et une architecture plus propre.

Étape 1 — Initialiser le projet (Heure 0-1)

Créez votre projet avec la CLI officielle. Nous utilisons TypeScript, Tailwind CSS, ESLint et le App Router :

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

cd mon-saas

# Installer les dépendances essentielles
npm install prisma @prisma/client next-auth
npm install stripe @stripe/stripe-js
npm install zod react-hook-form
npm install @neuraapi/sdk

zod servira à valider les formulaires, react-hook-form pour gérer l'état des formulaires, et @neuraapi/sdk pour intégrer l'IA.

Étape 2 — Configurer la base de données (Heure 1-3)

Prisma est l'ORM standard pour les projets Next.js. Initialisez-le avec PostgreSQL :

npx prisma init --datasource-provider postgresql

Définissez votre schéma de base de données. Pour un SaaS minimal, vous avez besoin d'un modèle User et d'un modèle Subscription :

// 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("free")
  stripeCustomerId String?      @unique
  apiKey         String         @unique @default(cuid())
  createdAt      DateTime       @default(now())
  updatedAt      DateTime       @updatedAt
  projects       Project[]
  subscription   Subscription?
}

model Project {
  id        String   @id @default(cuid())
  name      String
  userId    String
  user      User     @relation(fields: [userId], references: [id])
  createdAt DateTime @default(now())
}

model Subscription {
  id                 String   @id @default(cuid())
  userId             String   @unique
  user               User     @relation(fields: [userId], references: [id])
  stripeSubscriptionId String @unique
  status             String
  plan               String
  currentPeriodEnd   DateTime
}

Ce schéma couvre l'essentiel : un utilisateur, ses projets, et son abonnement Stripe. Vous l'étendrez naturellement au fur et à mesure que votre SaaS grandira.

Étape 3 — Implémenter l'authentification (Heure 3-8)

NextAuth.js est la solution standard pour l'auth dans Next.js. Configurez-le avec credentials (email + mot de passe) :

// 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: 'Mot de passe', 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' },
})

Créez ensuite les pages /login et /register avec des formulaires utilisant react-hook-form et zod pour la validation côté serveur.

Étape 4 — Construire le dashboard (Heure 8-16)

Le dashboard est le cœur de votre SaaS. Utilisez les layouts imbriqués de Next.js 14 pour une navigation fluide :

// src/app/dashboard/layout.tsx
import { auth } from '@/lib/auth'
import { redirect } from 'next/navigation'
import Sidebar from '@/components/dashboard/Sidebar'

export default async function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const session = await auth()
  if (!session) redirect('/login')

  return (
    <div className="flex min-h-screen">
      <Sidebar user={session.user} />
      <main className="flex-1 p-8">{children}</main>
    </div>
  )
}

Le layout protège automatiquement toutes les routes enfants. Si l'utilisateur n'est pas connecté, il est redirigé vers /login. La sidebar affiche la navigation et les informations de l'utilisateur.

Étape 5 — Intégrer la facturation Stripe (Heure 16-28)

Stripe est l'épine dorsale de votre monétisation. Créez d'abord les plans dans votre dashboard Stripe, puis intégrez le checkout :

// 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!)

const PLANS = {
  starter: { priceId: 'price_xxx', name: 'Starter' },
  pro: { priceId: 'price_yyy', name: 'Pro' },
  enterprise: { priceId: 'price_zzz', name: 'Entreprise' },
}

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

  const { plan } = await req.json()
  const selectedPlan = PLANS[plan as keyof typeof PLANS]
  if (!selectedPlan) {
    return NextResponse.json({ error: 'Plan invalide' }, { status: 400 })
  }

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

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

N'oubliez pas de configurer les webhooks Stripe pour synchroniser les changements d'abonnement avec votre base de données. Le webhook checkout.session.completed active l'abonnement, et customer.subscription.deleted le désactive.

Étape 6 — Ajouter l'IA avec NeuraAPI (Heure 28-36)

C'est ici que votre SaaS se différencie. NeuraAPI vous donne accès à des modèles IA (GPT-4, Claude, etc.) via une API unique. Intégrez-la dans votre produit :

// src/lib/ai.ts
import { NeuraAPI } from '@neuraapi/sdk'

const ai = new NeuraAPI(process.env.NEURA_API_KEY!)

export async function generateContent(prompt: string, userId: string) {
  // Vérifier le quota utilisateur
  const credits = await checkCredits(userId)
  if (credits <= 0) {
    throw new Error('Crédits épuisés. Passez au plan supérieur.')
  }

  const result = await ai.generate({
    prompt,
    maxTokens: 1000,
  })

  // Déduire un crédit
  await consumeCredit(userId)

  return result.content
}

Ajoutez une route API Next.js pour exposer cette fonctionnalité à votre frontend. Vos utilisateurs pourront générer du contenu, des emails, des descriptions de produits — tout en restant dans votre application.

Étape 7 — Déployer sur Vercel (Heure 36-44)

Vercel est le déploiment natif pour Next.js. Un seul fichier de config et vous êtes en production :

# Installer Vercel CLI
npm i -g vercel

# Déployer en staging
vercel

# Configurer les variables d'environnement
vercel env add DATABASE_URL
vercel env add NEXTAUTH_SECRET
vercel env add STRIPE_SECRET_KEY
vercel env add STRIPE_WEBHOOK_SECRET
vercel env add NEURA_API_KEY

# Déployer en production
vercel --prod

Configurez aussi votre nom de domaine personnalisé dans les paramètres du projet Vercel. Le SSL est géré automatiquement.

Étape 8 — Finaliser et lancer (Heure 44-48)

Les dernières heures sont dédiées aux finitions :

  • Ajoutez une landing page avec les avantages de votre SaaS
  • Configurez les emails transactionnels (welcome, reset password, invoice)
  • Ajoutez Google Analytics et les meta tags SEO
  • Testez le flux complet : inscription → login → paiement → utilisation
  • Vérifiez les performances avec Lighthouse (ciblez 90+ partout)
  • Configurez les alertes d'erreur (Sentry ou Vercel Analytics)

Récapitulatif des 48 heures

1Heures 0-1 — Setup projet, dépendances, configuration
2Heures 1-3 — Base de données Prisma, schéma, migrations
3Heures 3-8 — Authentification NextAuth, register, login
4Heures 8-16 — Dashboard, layout, navigation, settings
5Heures 16-28 — Stripe checkout, webhooks, gestion d'abonnement
6Heures 28-36 — Intégration IA NeuraAPI, routes, frontend
7Heures 36-44 — Déploiement Vercel, variables, domaine
8Heures 44-48 — Landing, emails, SEO, tests, monitoring

Raccourci : le template NeuraSaaS

Tout ce guide est pré-configuré dans le template NeuraSaaS : auth, dashboard, Stripe, landing page, intégration IA. Gagnez 40h de développement.

Voir les tarifs →

Articles connexes