Fonctionnalité Next.js App Router avec Server Actions

Prompt

Agis comme un ingénieur frontend senior spécialisé dans Next.js App Router, les React Server Components et TypeScript en mode strict.

Je dois implémenter la fonctionnalité « {{feature}} » dans une application Next.js {{next_version}}.
Couche de données : {{data_layer}}.
Authentification : {{auth}}.
Règles métier et champs du formulaire : {{rules}}.

Livre, dans cet ordre :
1. L’arborescence des fichiers dans `app/` et `lib/` (routes, `page.tsx`, `loading.tsx`, `error.tsx`, composants client et serveur), en expliquant ce qui est un Server Component, ce qui est un Client Component, et pourquoi.
2. Un schéma de validation Zod partagé entre le client et le serveur, avec des messages d’erreur compréhensibles pour l’utilisateur.
3. La Server Action complète (`'use server'`) : vérification de la session et des permissions, validation, écriture en base, `revalidatePath` ou `revalidateTag`, et un objet de réponse typé `{ ok, errors, message }`.
4. Le formulaire avec `useActionState` et `useFormStatus` (sous Next.js 14 avec React 18, utilise `useFormState` de `react-dom` à la place de `useActionState`) : erreurs par champ, bouton désactivé pendant l’envoi et focus placé sur le premier champ invalide.
5. La gestion des erreurs : erreurs attendues ou inattendues, ce qui est journalisé et ce que voit l’utilisateur.
6. Les tests : tests unitaires du schéma et de l’action (couche de données simulée) et un test de bout en bout Playwright pour le scénario nominal.
7. Une liste de contrôle de sécurité : CSRF, autorisation côté serveur, limites de taille des requêtes et données sensibles qui ne doivent jamais arriver côté client.

Contraintes :
- TypeScript strict, sans `any`.
- N’invente ni noms de tables ni variables d’environnement : utilise [À COMPLÉTER] s’il manque une information.
- Si tu manques d’informations pour une décision importante, pose-moi la question avant d’écrire du code.

Comment l'utiliser

Exemple d'utilisation

Exemple de résultat

'use server';

import { revalidatePath } from 'next/cache';
import { auth } from '@/auth';
import { prisma } from '@/lib/prisma';
import { bookingSchema } from '@/lib/validation/booking';

export type ActionState = {
  ok: boolean;
  errors?: Partial<Record<'roomId' | 'start' | 'end', string[]>>;
  message?: string;
};

export async function createBooking(_prev: ActionState, formData: FormData): Promise<ActionState> {
  const session = await auth();
  if (!session?.user?.id) return { ok: false, message: 'Connectez-vous pour réserver une salle.' };

  const parsed = bookingSchema.safeParse(Object.fromEntries(formData));
  if (!parsed.success) return { ok: false, errors: parsed.error.flatten().fieldErrors };

  const { roomId, start, end } = parsed.data;
  const overlap = await prisma.booking.findFirst({
    where: { roomId, start: { lt: end }, end: { gt: start } },
  });
  if (overlap) return { ok: false, errors: { start: ['Cette salle est déjà réservée sur ce créneau.'] } };

  await prisma.booking.create({ data: { roomId, start, end, userId: session.user.id } });
  revalidatePath('/bookings');
  return { ok: true, message: 'Réservation créée.' };
}

Informations clés

Catégorie

Programmation et développement · Next.js

Type de résultat

Code

Niveau

Avancé

Conçu pour

ChatGPT, Claude et Microsoft Copilot

Vérifié sur

En attente de vérification éditoriale

Variables

Fonctionnalité, Version de Next.js, Couche de données, Authentification et Règles et champs

Langue

Français

Prix

Gratuit, sans inscription

Mis à jour

07/11/2026

Questions fréquentes