Comment passer des arguments supplémentaires aux actions du serveur Next.js

La mutation asynchrone des données et son traitement sont des tâches indispensables dans les applications web modernes. Vous souhaitez peut-être exécuter une fonction asynchrone indépendante sur le serveur pour effectuer des tâches telles que sauvegarder des données dans le stockage de données, envoyer des courriels, télécharger des PDF, traiter des images, et ainsi de suite.

Next.js nous fournit des Actions du Serveur qui sont des fonctions asynchrones exécutées sur le serveur. Nous pouvons utiliser les actions du serveur pour les mutations de données sur le serveur, mais les actions du serveur peuvent être invoquées à partir des composants serveur et client.

Les actions du serveur constituent une excellente méthode pour gérer les soumissions de formulaires en exécutant l’action lorsque les données du formulaire sont soumises. Dans cet article, nous examinerons un cas d’utilisation pratique de la manipulation d’arguments supplémentaires dans les actions du serveur de Next.js.

Si vous êtes intéressé à apprendre les Actions du Serveur de Next.js avec des patrons de conception et la construction de projets, j’ai créé un cours d’urgence pour vous que vous pouvez trouver ici.

De plus, cet article est également disponible sous forme de tutoriel vidéo ici :

Table des matières

Pourquoi Faut-il Passer des Arguments Supplémentaires ?
Un Formulaire avec une Action du Serveur
Comment passer des arguments supplémentaires
Qu’en est-il des champs cachés ?
Ressources

Pourquoi devriez-vous passer des arguments supplémentaires ?

Lorsque nous exécutons une action serveur sur un formulaire de soumission, l’action serveur reçoit automatiquement les données du formulaire. Par exemple, jetez un oeil au formulaire ci-dessous :

<form className="p-4 flex" action={updateUser}>
  <Input className="w-1/2 mx-2" type="text" name="name" />
  <Button type="submit">Update User Name</Button>
</form>

Ici, nous exécutons une action serveur appelée updateUser lorsque le formulaire est soumis. La fonction updateUser recevra les données soumises du formulaire en tant qu’argument, ce qui peut être utilisé pour extraire les valeurs des champs du formulaire.

Comme vous pouvez le voir dans l’extrait de code ci-dessous, la fonction updateUser reçoit un formData en tant qu’argument, et nous pouvons extraire la valeur du champ name à partir de celui-ci.

"use server"

export async function updateUser(formData) {
  const name = formData.get('name');
  console.log(name);
}

Bien que ce modèle couvre la plupart des cas d’utilisation fondamentaux, vous pourriez avoir besoin de passer des arguments supplémentaires de manière programmatique aux actions du serveur. Ces arguments ne font pas partie du formulaire, des données du formulaire ou de l’entrée utilisateur. Ils représentent des valeurs passées de manière programmatique à votre action du serveur.

Pour comprendre cela, vérifiez le code snippet de l’action du serveur ci-dessous. Il s’agit de la même action du serveur que celle que nous avons vue auparavant, mais nous avons ajouté un argument userId supplémentaire en plus des arguments réguliers formData.

"use server"

export async function updateUser(userId, formData) {
  const name = formData.get('name');
  console.log(userId);
  console.log(name);
}

La valeur userId est une information interne à l’application – et vous ne demanderiez pas à l’utilisateur de soumettre la valeur en tant que partie de la soumission du formulaire. Au lieu de cela, vous pourriez avoir besoin de passer cette valeur de manière programmatique à votre action de serveur afin de effectuer des calculs supplémentaires.

C’est exactement le cas que nous traitons ici. Comme nous comprenons pourquoi nous en avons besoin, essayons de comprendre comment l’atteindre. Toutefois, avant de cela, créez un formulaire et une action de serveur fonctionnelle pour le même.

Un formulaire Avec une Action de Serveur

Créez un dossier nommé actions dans le dossier app de votre application Next.js. Maintenant, créez un fichier user.js dans le dossier actions avec le code suivant :

"use server"

export async function updateUser(formData) {
  const name = formData.get('name');
  console.log(name);

  // Faire n'importe quoi avec le nom, sauver dans la BD, créer une facture, quelque chose de comme ça!
}

C’est ainsi que vous créez une fonction serveur dans Next.js. Il doit avoir une directive ”use server” en haut du fichier pour indiquer à Next.js que c’est un fichier spécial contenant une ou plusieurs fonctions asynchrones à exécuter sur le serveur.

Nous avons ensuite l’action du serveur (la fonction asynchrone) updateUser avec formData en tant qu’argument. Dans la définition de la fonction, nous extraisons la valeur name et l’imprimons sur la console.

Maintenant, attachons cette action du serveur à un formulaire. Pour ce faire, créez un dossier nommé components dans le dossier racine du projet. Créez un fichier nommé user-form.jsx avec le code suivant :

import { Input } from "./ui/input"
import { Button } from "./ui/button"

import { updateUser } from "@/app/actions/user"

const UserForm = () => {
  return(
    <form className="p-4 flex" action={updateUser}>
      <Input className="w-1/2 mx-2" type="text" name="name" />
      <Button type="submit">Update User Name</Button>
    </form>
  )
}

export default UserForm;

Ceci est un composant React simple avec un formulaire. Le formulaire a un champ de texte d’entrée appelé name et un bouton Envoyer pour soumettre le formulaire. Le formulaire a un attribut action avec l’action du serveur updateUser comme valeur. Maintenant, lorsque le formulaire est soumis avec une valeur name, l’action du serveur la reçoit en tant que partie des données du formulaire, comme nous l’avons discuté ci-dessus.

Testons-le. Pour ce faire, nous créerons une route et une page Next.js où nous pouvons utiliser le composant UserForm. Créez un dossier nommé extra-args dans le dossier app. Maintenant, créez un fichier nommé page.js dans le dossier app/extra-args avec le code suivant :

import UserForm from "@/components/user-form";

const ExtraArgsDemo = () => {
  return (
    <UserForm />
  )
}

export default ExtraArgsDemo;

Ceci est un composant React simple où nous avons importé le composant UserForm et l’avons utilisé dans le JSX. Maintenant, exécutez le serveur local et accédez à cette route localhost:3000/extra-args. Vous devraitz voir le formulaire avec un champ de texte et un bouton.

Saisissez du texte dans le champ de texte et cliquez sur le bouton.

Maintenant, vous verrez que le texte tapé a été imprimé sur la console du serveur. Pourquoi sur la console du serveur et pas sur la console du navigateur ? C’est parce que les actions serveur sont exécutées sur le serveur et non pas sur le côté client du navigateur.

Ainsi, avec cela, nous avons maintenant établi un flux de données comme ceci:

Page => Formulaire => Action Serveur

La page possède un formulaire. Le formulaire exécute une action serveur à la soumission. L’action serveur imprime les données du formulaire sur la console du serveur.

Maintenant, essayons d’améliorer ces morceaux pour transmettre des arguments supplémentaires à l’action serveur.

Comment Transmettre Des Arguments Supplémentaires

Faisons passer une prop à l’élément UserForm depuis la page. Nous passerons un userId avec une valeur pour faire semblant que nous transmettons ce userId programmatiquement à notre formulaire et à l’action serveur à partir de là.

import UserForm from "@/components/user-form";

const ExtraArgsDemo = () => {
  return (
    <UserForm userId={"1234"} />
  )
}

export default ExtraArgsDemo;

Dans l’élément UserForm, nous acceptons la prop userId. Maintenant, nous devons faire quelque chose de spécial pour transmettre cet userId à l’action serveur updateUser.

JavaScript dispose d’une méthode magique appelée bind() qui nous permet de créer une Fonction Partiellement Appliquée. Avec cette fonction partiellement appliquée, vous pouvez créer une fonction à partir d’une autre fonction en fixant certains de ses arguments.

Dans notre cas, la fonction updateUser possède déjà un argument nommé formData. Maintenant, nous pouvons passer userId comme argument supplémentaire en utilisant la méthode bind() pour créer une nouvelle fonction.

const updatedUserWithId = updateUser.bind(null, userId);

Le premier argument de la méthode bind() est le contexte auquel vous liez la fonction. Le contexte gère l’association de la fonction avec la valeur du mot-clé this. Dans notre cas, nous pouvons le laisser à null car nous ne changeons pas sa valeur. Par la suite, nous avons passé le nouvel argument userId. Il est bon de savoir que la méthode bind() fonctionne sur les composants serveur et client.

Voici le composant UserForm modifié (fichier user-form.jsx). Notez que la valeur d’action du formulaire est maintenant modifiée pour la nouvelle fonction updatedUserWithId.

import { Input } from "./ui/input"
import { Button } from "./ui/button"

import { updateUser } from "@/app/actions/user"

const UserForm = ({userId}) => {
  const updatedUserWithId = updateUser.bind(null, userId);

  return(
    <form className="p-4 flex" action={updatedUserWithId}>
      <Input className="w-1/2 mx-2" type="text" name="name" />
      <Button type="submit">Update User Name</Button>
    </form>
  )
}

export default UserForm;

Maintenant, l’action serveur recevra la valeur userId en tant qu’argument. Affichez-le également sur la console.

"use server"

export async function updateUser(userId, formData) {
  const name = formData.get('name');
  console.log(userId);
  console.log(name);

  // Faire quelque chose avec l'identifiant de l'utilisateur et le nom, enregistrer dans la BD,
  // créer une facture, ou quoi que ce soit !
}

Maintenant, si vous soumettez le formulaire avec une valeur de nom :

Vous verrez que les valeurs de l’identifiant d’utilisateur et du nom sont enregistrées sur la console du serveur. Super ! Nous avons enregistré une valeur depuis les données du formulaire, et l’autre a été passée interne à l’action du serveur.

Ainsi, nous avons appris comment passer les arguments supplémentaires à l’action du serveur en même temps que les données du formulaire.

Qu’en est-il des champs cachés ?

HTML prend en charge un champ de formulaire de type caché pour transmettre des données client au serveur sans accepter la saisie des utilisateurs. Cela signifie que nous aurions pu utiliser le champ caché pour transmettre la valeur userId comme ceci :

Alors pourquoi avons-nous fait tout cela avec la méthode bind() ? Eh bien, en raison de préoccupations de sécurité. Lorsque vous transmettez des données en utilisant des champs cachés, la valeur fera partie du HTML rendu, et elle ne sera pas non plus encodée. Il est donc préférable de la traiter de manière programmatique.

Ressources

C’est tout pour l’instant. Avez-vous apprécié la lecture de cet article et avez-vous appris quelque chose de nouveau ? Si oui, j’aimerais savoir si le contenu vous a été utile. Permettez-moi de partager quelques ressources supplémentaires dont vous pourriez avoir besoin :

Tout le code source utilisé dans cet article est sur mon GitHub.
Voici le Cours accéléré sur les Actions Serveur avec des Modèles et un Projet.
Voici la Documentation officielle des actions du serveur si vous voulez en savoir plus.
De plus, vous pouvez en apprendre davantage sur la méthode bind() ici.

De plus, vous pouvez me suivre sur :

Abonner à mon canal YouTube. Si vous souhaitez apprendre React et son écosystème, comme Next.js, avec des concepts fondamentaux et des projets, j’ai de bonnes nouvelles pour vous : vous pouvez visionner cette playlist sur mon canal YouTube avec plus de 25 vidéos tutoriels et plus de 15 heures de contenu engageant pour le moment, gratuitement. J’espère que vous les aimerez également.
Suivez-moi sur X (Twitter) ou LinkedIn si vous ne voulez pas manquer à la dose quotidienne d’astuces pour améliorer vos compétences.
Consultez et suitent mon travail Open Source sur GitHub.
Je publie régulièrement des messages significatifs sur mon GreenRoots Blog, vous pourriez aussi y trouver de l’aide.

Je vous verrai bientôt avec mon prochain article. jusque-là, veuillez prendre soin de vous et continuez à apprendre.