Créer une facture - Étape par étape

1. Créer un formulaire : Un formulaire est nécessaire pour recueillir les détails. C’est ici que l’utilisateur saisit les informations de la nouvelle facture ;
2. Utiliser une action serveur : Créer une action spécifique côté serveur pour traiter les données du formulaire. Lorsque quelqu’un soumet le formulaire, cette action est déclenchée ;
3. Récupérer les données du formulaire : À l’intérieur de l’action serveur, extraire les informations du formulaire. Cela revient à déballer une boîte pour voir ce qu’elle contient ;
4. Vérifier et préparer les données : Examiner les données et s’assurer qu’elles sont correctes. C’est comme vérifier que les ingrédients d’une recette sont frais et appropriés. Une fois la vérification faite, préparer les données pour l’insertion en base de données ;
5. Insérer les données : Enregistrer les données dans la base de données ;
6. Actualiser le cache et revenir à la page des factures : Après l’ajout des données, mettre à jour le cache afin que tout le monde dispose des dernières informations. Ensuite, rediriger l’utilisateur vers la page des factures pour qu’il puisse voir la nouvelle facture créée.

Retour au projet

1. Créer un formulaire

Créer un nouveau dossier nommé 'create' dans le répertoire app/dashboard/invoices. Créer un nouveau fichier appelé page.tsx à l'intérieur de ce dossier. Ce fichier servira de nouvelle page permettant aux utilisateurs de générer une facture.

Copier et coller le code suivant dans le fichier page.tsx :

La page utilise un composant serveur pour collecter les informations de l'utilisateur, puis les transmet à un composant <Form> prêt à l'emploi. Voici une présentation du composant <Form> :

• Liste déroulante pour les utilisateurs ;
• Champ de saisie pour le montant ;
• Boutons radio pour le statut ;
• Bouton de soumission pour valider.

En cliquant sur le bouton « Create Invoice », vous serez redirigé vers un formulaire qui vous invitera à renseigner les informations nécessaires.

2. Utilisation d'une Server Action

1. Accéder au répertoire lib ;
2. Créer un nouveau fichier nommé actions.ts ;
3. Ajouter la directive 'use server' en haut du fichier ;
   • Pourquoi 'use server' ? - Permet aux fonctions d'être polyvalentes et utilisables à la fois dans les composants Client et Server. Il s'agit d'une méthode pratique pour organiser les Server Actions, mais il est également possible de les intégrer directement dans les composants Server si nécessaire.
4. Création d'une fonction Server Action.

Ensuite, dans le composant <Form>, importer createInvoice depuis le fichier actions.ts. Ajouter un attribut action à l’élément <form> et invoquer l’action createInvoice.

3. Récupérer les données du formulaire

Revenir à app/lib/actions.ts pour extraire les valeurs de formData à l’aide de la méthode .get(name). Une fois cette tâche accomplie, il est possible de remplir le formulaire et de consulter les données saisies dans la console du terminal.

Résultat :

4. Vérification et préparation des données

Avant de stocker les données du formulaire dans la base de données, il est essentiel de vérifier qu'elles sont au bon format et possèdent les bons types. Dans ce cours, nous utilisons un format spécifique pour les données de la table invoice.

Pour faciliter ce processus, plusieurs options de validation de type sont disponibles. Plutôt que de vérifier manuellement les types, nous pouvons utiliser Zod, une bibliothèque de validation orientée TypeScript. Cet outil simplifie considérablement la tâche de validation.

Voici les étapes à suivre dans le fichier actions.ts :

1. Importer Zod dans le fichier actions.ts ;
2. Créer un schéma avec Zod correspondant à la structure de l'objet formulaire. Ce schéma sert de règles pour garantir que le formData est correct avant son insertion dans la base de données.

Ensuite, transmettre le rawFormData à CreateInvoice pour valider les types.

Convertir le montant en centimes et créer une nouvelle date au format "YYYY-MM-DD" en utilisant JavaScript natif.

5. Insérer des données

Maintenant que toutes les valeurs nécessaires sont disponibles, utiliser sql pour les envoyer à la base de données.

6. Actualiser le cache et revenir aux factures

Next.js propose une fonctionnalité pratique appelée Client-side Router Cache. Elle conserve l’historique de navigation des utilisateurs sur le site pendant une certaine période. Ce cache, combiné au préchargement, permet aux utilisateurs de naviguer rapidement entre différentes pages sans surcharger le serveur avec trop de requêtes.

Voici les étapes à suivre :

1. Après la mise à jour des données sur la page des factures, il est important de s'assurer que les utilisateurs voient les informations les plus récentes. Pour cela, vider le cache à l'aide de la fonction revalidatePath. Cela garantit qu'une nouvelle requête est envoyée au serveur pour récupérer les données les plus récentes ;
2. Après la mise à jour des données et la suppression du cache, rediriger l'utilisateur vers la page des factures de manière fluide. Cela se fait avec la fonction redirect. Cela équivaut à leur indiquer le chemin de retour.

En pratique