Création d'Élément

Créer une Facture - Étape par Étape

1. Créer un Formulaire : Tout d'abord, nous avons besoin d'un formulaire pour obtenir les détails. C'est là que l'utilisateur entre les informations pour la nouvelle facture;
2. Utiliser une Action Serveur : Créez une action spéciale sur le serveur pour gérer les données du formulaire. Lorsqu'une personne remplit le formulaire, cette action est déclenchée;
3. Obtenir les Données du Formulaire : À l'intérieur de l'Action Serveur, extrayez les informations du formulaire. Pensez-y comme déballer une boîte - vous voulez voir ce qu'il y a à l'intérieur;
4. Vérifier et Préparer les Données : Examinez les données et assurez-vous qu'elles sont correctes. C'est comme vérifier que les ingrédients d'une recette sont frais et corrects. Une fois que tout est en ordre, préparez-les pour les insérer dans la base de données;
5. Insérer les Données : Insérez les données dans la base de données;
6. Rafraîchir le Cache et Retourner à la Page des Factures : Après avoir ajouté les données, mettez à jour le cache. C'est comme s'assurer que tout le monde obtient les dernières informations. Ensuite, renvoyez l'utilisateur à la page des factures pour qu'il puisse voir la nouvelle facture qu'il vient de créer.

Retour au Projet

1. Créer un formulaire

Créez un nouveau dossier nommé 'create' dans le répertoire app/dashboard/invoices. Créez 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.

Copiez et collez le code suivant dans le fichier page.tsx :

La page utilise un composant serveur pour recueillir les informations de l'utilisateur, puis les envoie à un composant <Form> prêt à l'emploi. Voici un aperçu du composant <Form> :

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

Si vous cliquez sur le bouton "Créer une facture", vous devriez être dirigé vers un formulaire qui vous demandera de remplir les informations nécessaires.

2. Utiliser une Action Serveur

1. Naviguez vers le répertoire lib;
2. Créez un nouveau fichier nommé actions.ts;
3. Ajoutez la directive 'use server' en haut;
   • Pourquoi 'use server'? - Cela permet aux fonctions d'être polyvalentes et utilisables dans les composants Client et Serveur. C'est un moyen pratique d'organiser les Actions Serveur, mais nous pouvons également les intégrer directement dans les Composants Serveur si nécessaire.
4. Création d'une fonction d'Action Serveur.

Ensuite, dans le composant <Form>, importez createInvoice depuis le fichier actions.ts. Incluez un attribut action dans l'élément <form> et invoquez l'action createInvoice.

3. Obtenez les données du formulaire

Retournez à app/lib/actions.ts pour extraire les valeurs de formData en utilisant la méthode .get(name). Une fois cette tâche terminée, vous pouvez remplir le formulaire et examiner les données saisies dans la console du terminal.

Résultat :

4. Vérifiez et préparez les données

Avant de stocker les données du formulaire dans la base de données, il est crucial de vérifier si elles sont au bon format et ont les types corrects. Dans notre cours, nous avons utilisé un format spécifique pour les données du tableau de factures.

Pour faciliter ce processus, nous avons quelques options pour la validation des types. Au lieu de vérifier manuellement les types, nous pouvons utiliser Zod, une bibliothèque de validation orientée TypeScript. C'est un outil pratique qui simplifie la tâche de validation.

Voici ce que nous devons faire dans le fichier actions.ts :

1. Importer Zod dans le fichier actions.ts ;
2. Créer un schéma en utilisant Zod qui correspond à la structure de l'objet formulaire. Ce schéma agit comme un ensemble de règles pour s'assurer que le formData est correct avant qu'il n'entre dans la base de données.

Ensuite, nous passons le rawFormData à CreateInvoice pour valider les types.

Convertissons ensuite le montant en centimes et créons une nouvelle date au format "YYYY-MM-DD" en utilisant JS vanilla.

5. Insérer des données

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

6. Rafraîchir le Cache et Retourner aux Factures

Next.js dispose d'une fonctionnalité pratique appelée le Cache du Routeur Côté Client. Il garde une trace des endroits où les utilisateurs ont été sur le site pendant une certaine période. Ce cache, combiné avec le préchargement, garantit que les utilisateurs peuvent passer rapidement d'une page à l'autre sans surcharger le serveur avec trop de requêtes.

Voici ce que nous voulons faire :

1. Puisque nous avons mis à jour les données sur la page des factures, nous voulons nous assurer que les utilisateurs voient les informations les plus récentes. Pour ce faire, nous vidons le cache en utilisant la fonction revalidatePath. Cela garantit qu'une nouvelle requête est envoyée au serveur, récupérant les données les plus récentes ;
2. Après avoir mis à jour les données et vidé le cache, nous voulons guider l'utilisateur de retour à la page des factures en douceur. Nous y parvenons en utilisant la fonction redirect. C'est comme leur donner des indications pour revenir là où ils étaient.

En Pratique