Concentrons-nous sur les opérations CRUD. Jusqu'à présent, nous nous sommes contentés de lire des données depuis le serveur et de les afficher à l'utilisateur. Désormais, l'objectif est de créer, modifier et supprimer des données. Toutes ces opérations seront réalisées pour la page des factures.

Théorie

Avant d'aborder l'implémentation, examinons le concept de Server Actions dans Next.js.

Les Server Actions permettent d'exécuter du code spécifique directement sur le serveur. Au lieu de mettre en place des méthodes complexes pour modifier vos données, vous pouvez utiliser ces actions.

Pourquoi les Server Actions sont-elles importantes ?

Les applications web doivent être sécurisées, car elles peuvent être exposées à différents types d'attaques. Les Server Actions contribuent fortement à la sécurité. Elles utilisent diverses techniques telles que des requêtes spécifiques, des messages codés, des contrôles stricts et des restrictions pour protéger votre application contre les attaques, sécuriser vos données et garantir que seules les personnes autorisées y ont accès.

Comment utiliser les formulaires avec les Server Actions ?

Il est possible de créer des formulaires qui utilisent les Server Actions. En termes simples, il suffit d’ajouter un code spécifique dans le formulaire pour indiquer quelle action exécuter. Cette action reçoit automatiquement les données saisies dans le formulaire.

// Server Component
export default function Page() {
  // Action
  async function create(formData: FormData) {
    'use server';
 
    // Logic to change data...
  }
 
  // Put the action in the `action` attribute
  return <form action={create}>...</form>;
}