🚀 Server Actions dans Next.js 13+ : Le Remplacement des API Routes

Avec l’introduction de Server Actions dans Next.js 13+, on assiste à un changement majeur dans la gestion des actions côté serveur, remplaçant progressivement les API Routes.

1️⃣ Qu’est-ce qu’une Server Action ?

Les Server Actions permettent d’exécuter des fonctions côté serveur directement depuis les composants React sans avoir besoin de créer une route API distincte.

✅ Avantages :

• Plus besoin de définir des API Routes (pages/api/* ou app/api/*).
• Réduction des allers-retours client-serveur.
• Sécurité renforcée : les actions ne sont pas exposées côté client.
• Simplicité et meilleure lisibilité du code.

🔹 Comparaison :

Voici une version améliorée du chapitre, mettant en parallèle une API Route classique et une Server Action, afin d’illustrer clairement leurs différences.

2️⃣ Méthode avec une API Route (app/api/)

Définition de l’API Route

Avec Next.js, une API Route est définie dans app/api/addComment/route.ts ou pages/api/addComment.ts.

import { NextResponse } from "next/server";
import { db } from "@/lib/db"; // Connexion à la base de données
 
export async function POST(req: Request) {
  const { comment } = await req.json();
  
  if (!comment) {
    return NextResponse.json({ error: "Le commentaire est vide." }, { status: 400 });
  }
 
  await db.comments.create({ data: { content: comment } });
 
  return NextResponse.json({ success: true });
}

Utilisation côté client (fetch())

Le client doit envoyer une requête HTTP vers l’API.

"use client";
 
import { useState } from "react";
 
export default function CommentsPage() {
  const [comment, setComment] = useState("");
  const [status, setStatus] = useState("");
 
  async function submitComment(e: React.FormEvent) {
    e.preventDefault();
    setStatus("Envoi en cours...");
 
    const response = await fetch("/api/addComment", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ comment }),
    });
 
    if (response.ok) {
      setStatus("Commentaire ajouté !");
      setComment("");
    } else {
      setStatus("Erreur lors de l'envoi.");
    }
  }
 
  return (
    <div>
      <h1>Ajouter un commentaire</h1>
      <form onSubmit={submitComment}>
        <textarea
          name="comment"
          value={comment}
          onChange={(e) => setComment(e.target.value)}
        />
        <button type="submit">Envoyer</button>
      </form>
      <p>{status}</p>
    </div>
  );
}

✅ Points à retenir :

• Nécessite un appel fetch() côté client.
• Une requête HTTP est envoyée au serveur.
• L’API Route reste accessible publiquement si elle n’est pas protégée.

3️⃣ Exécution sans fetch (Appels directs)

Dans un formulaire sans état client, on peut directement passer la Server Action dans action={maFonction}.

🔹 Exemple : Formulaire d’inscription

import { registerUser } from "@/app/actions/register";
 
export default function SignupPage() {
  return (
    <form action={registerUser}>
      <input type="text" name="name" placeholder="Nom" required />
      <input type="email" name="email" placeholder="Email" required />
      <button type="submit">S'inscrire</button>
    </form>
  );
}

"use server";
 
import { db } from "@/lib/db";
 
export async function registerUser(formData: FormData) {
  const name = formData.get("name") as string;
  const email = formData.get("email") as string;
 
  await db.user.create({
    data: { name, email },
  });
 
  return { success: true };
}

✅ Avantages :

• Plus besoin de fetch().
• Exécution optimisée côté serveur.
• Simplicité de gestion pour les formulaires.

4️⃣ Server Actions avec Authentification et Sécurité

Les Server Actions permettent aussi d’interagir avec l’authentification.

🔹 Exemple : Authentification avec NextAuth

"use server";
 
import { auth } from "@/lib/auth"; // NextAuth
 
export async function loginUser(formData: FormData) {
  const email = formData.get("email");
  const password = formData.get("password");
 
  const user = await auth.verify(email, password);
  if (!user) return { error: "Identifiants incorrects" };
 
  return { success: true, user };
}

✅ Sécurité renforcée :

• L’authentification reste côté serveur.
• Pas d’exposition des données sensibles.

5️⃣ Comparaison avec les API Routes

6️⃣ Quand utiliser Server Actions vs API Routes ?

✅ Utiliser les Server Actions quand :

• Vous avez une interaction directe avec le serveur.
• Vous traitez des formulaires simples (inscription, commentaire, contact…).
• Vous voulez optimiser les requêtes et éviter un aller-retour client-serveur.

❌ Utiliser les API Routes quand :

• Vous avez besoin d’une API publique pour d’autres services.
• Vous traitez des webhooks ou des requêtes externes.
• Vous devez gérer des authentifications OAuth ou JWT complexes.

🎯 Conclusion : Pourquoi adopter les Server Actions ?

🚀 Les Server Actions simplifient l’interaction client-serveur en évitant des API Routes superflues.

✅ Avantages principaux :

• Meilleure performance : moins de requêtes HTTP.
• Code plus clair et plus sécurisé.
• Intégration facile avec les formulaires et l’authentification.