Construire une Application Multi-Tenant avec Next.js

Dans le paysage numerique actuel, construire des applications evolutives et efficaces est crucial. Une telle approche consiste a creer une application multi-tenant, qui permet a plusieurs utilisateurs ou organisations de partager une seule instance d'une application logicielle tout en gardant leurs donnees isolees. Dans ce tutoriel, nous explorerons comment construire une application multi-tenant full-stack en utilisant Next.js, Vercel et d'autres technologies modernes.

Technologies Utilisees

• Next.js App Router: Un puissant framework React pour construire des applications rendues cote serveur.
• Tailwind CSS: Un framework CSS utilitaire pour le styling.
• Tremor: Une bibliotheque pour creer de beaux graphiques.
• Prisma: Un ORM pour l'acces aux bases de donnees.
• Novel: Un editeur WYSIWYG pour une experience d'ecriture fluide.
• Vercel Postgres: Une solution de base de donnees evolutive.
• Vercel Blob: Pour gerer les uploads d'images.
• NextAuth.js: Pour l'authentification.
• Vercel: Pour le deploiement, les domaines personnalises et les certificats SSL.

Fonctionnalites Cles

• Multi-tenancy: Attribuez des domaines personnalises, sous-domaines et certificats SSL illimites aux utilisateurs.
• Articles de blog ultra-performants: Caches via le reseau Edge de Vercel avec invalidation de cache a la demande.
• Editeur Markdown alimente par l'IA: Fournit une experience d'ecriture style Notion.
• Images Open Graph dynamiques: Pour chaque article de blog.

Options de Deploiement

Option 1: Deploiement depuis le Template

1. Demarrer le Deploiement: Cliquez sur le bouton de deploiement sur la page du template Platforms Starter Kit.
2. Ajouter le Stockage: Selectionnez l'option Base de donnees Postgres.
3. Ajouter les Variables d'Environnement: Configurez les variables d'environnement necessaires comme NEXT_PUBLIC_ROOT_DOMAIN, NEXTAUTH_SECRET, etc.
4. Deployer et Mettre a Jour: Cliquez sur le bouton Deployer et mettez a jour les parametres de votre projet.

Option 2: Deploiement depuis le Repository Github

1. Configurer Votre Projet Next.js: Utilisez le repository Platforms Starter Kit pour demarrer votre projet.
2. Configurer les Variables d'Environnement: Convertissez le fichier .env.example en fichier .env et configurez-le.
3. Publier le Schema Prisma: Executez npx prisma db push pour publier le schema.
4. Mettre a Jour les URLs de Callback NextAuth.js: Personnalisez les URLs de callback pour GitHub OAuth.

Structure du Projet

my-multi-tenant-app/
├── app/
│   ├── [domain]/
│   │   └── page.tsx
│   ├── api/
│   │   └── auth/
│   └── layout.tsx
├── lib/
│   ├── prisma.ts
│   └── auth.ts
├── prisma/
│   └── schema.prisma
└── components/

Configuration Multi-Tenant

Configuration du Middleware

// middleware.ts
import { NextRequest, NextResponse } from 'next/server';
 
export function middleware(req: NextRequest) {
  const url = req.nextUrl;
  const hostname = req.headers.get('host') || '';
 
  // Obtenir le sous-domaine
  const subdomain = hostname.split('.')[0];
 
  // Reecrire vers le chemin dynamique
  if (subdomain && subdomain !== 'www') {
    return NextResponse.rewrite(
      new URL(`/${subdomain}${url.pathname}`, req.url)
    );
  }
 
  return NextResponse.next();
}

Schema de Base de Donnees

// prisma/schema.prisma
model Tenant {
  id        String   @id @default(cuid())
  name      String
  subdomain String   @unique
  users     User[]
  createdAt DateTime @default(now())
}
 
model User {
  id       String @id @default(cuid())
  email    String @unique
  tenantId String
  tenant   Tenant @relation(fields: [tenantId], references: [id])
}

Conclusion

Vous avez maintenant cree une base pour une application multi-tenant avec Next.js. Vous pouvez etendre cela en ajoutant plus de fonctionnalites comme la facturation, les analytics et la gestion avancee des utilisateurs.

Reference: Vercel Platforms Starter Kit