React 19 Server Actions avec Zod : Moins de code de base pour FormData

React 19, Server Actions et useActionState redéfinissent la manière dont les formulaires sont construits. Pour de nombreuses pages, vous pouvez continuer à utiliser des formulaires HTML natifs et des gestionnaires serveur au lieu d’intégrer une vaste bibliothèque de formulaires côté client pour chaque cas.

Après plusieurs migrations vers cette stack, ces deux mêmes lignes réapparaissaient dans presque toutes les actions :

const data = Object.fromEntries(formData);

const result = schema.safeParse(data);if (!result.success) {
  return {
    errors: result.error.flatten().fieldErrors,
  };
}

Les pages de connexion, les flux d’inscription, les pages de contact et les éditeurs de profil utilisaient tous le même schéma : transformer FormData en objet, exécuter Zod, gérer les erreurs des champs, puis continuer. C’est cette répétition que vise zod-form-action — un petit outil permettant de combiner Zod avec React 19 Server Actions.

Qu’as-t-il changé dans React 19 ?

useActionState permet de suivre plus facilement l’état de soumission sans avoir à gérer manuellement plusieurs états côté client.

Au lieu de connecter onSubmit, les indicateurs de chargement et la validation dans le navigateur pour chaque formulaire, celui-ci peut envoyer directement les données vers une action serveur.

Cette approche a tendance à apporter :

• Moins de JavaScript envoyé au client
• Une meilleure perception des performances pour les flux simples
• Un code d’action plus simple
• Un amélioration progressive lorsque le paquet client est lent ou manquant
• Une séparation plus claire entre les tâches UI et celles du serveur

Pour de nombreuses applications, cette solution native est particulièrement adaptée.

Le problème de la validation des formulaires

Les actions serveur reçoivent une instance FormData.

Au préalable de la validation par Zod, la plupart des traitements convertissent cette instance en un objet ordinaire.

const data = Object.fromEntries(formData);

const result = schema.safeParse(data);

L’approche en elle-même est bonne.

Le problème réside dans le fait que chaque gestionnaire doit suivre la même liste de contrôles :

• Transformer FormData en un objet simple
• Exécuter le schéma Zod
• Formater les messages d’erreur au niveau des champs
• Renvoyer les valeurs typées en cas de succès
• Passer au code métier

Lorsque cette liste de contrôles apparaît sur des dizaines de formulaires, le travail de mise en forme éclipse la véritable logique.

Présentation de zod-form-action

zod-form-action a été conçu pour réduire cette couche de tâches répétitives.

Au lieu de réimplémenter les fonctions de parsing et de validation dans chaque action serveur, le gestionnaire peut se concentrer sur le comportement métier.

Le package suppose l’utilisation d’une stack déjà en place :

• React 19
• useActionState
• Next.js Server Actions (ou un autre hébergeur d’actions serveurs)
• Zod
• TypeScript

L’objectif est précis : maintenir une validation des formulaires côté serveur cohérente et facile à réutiliser.

Un environnement de test en temps réel est disponible via cette démo CodeSandbox.

Pourquoi ne pas simplement utiliser React Hook Form ?

Cette question se pose souvent, et la réponse n’est pas négative.

React Hook Form reste une bibliothèque excellente.

C’est encore un choix pertinent pour :

• Les formulaires dynamiques
• La validation côté client
• Les flux interactifs complexes
• Les tableaux de champs
• Les assistants en plusieurs étapes

Tous les formulaires n’ont pas besoin de ces fonctionnalités avancées.

Lorsqu’un projet utilise déjà le flux de travail natif des formulaires de React 19 avec Server Actions, un petit outil Zod côté serveur peut s’avérer plus adapté qu’un moteur de formulaire complet côté client.

Ces deux outils répondent à des problèmes différents plutôt que de concurrencer directement.

Avantages d’utiliser zod-form-action

Les équipes l’adoptent souvent pour :

• Cesser de réécrire la conversion des données FormData
• Aligner le comportement de validation entre les actions
• Ottenir des types TypeScript plus clairs après une analyse réussie
• Rapporter les erreurs des champs sous une forme standardisée
• S’intégrer parfaitement aux React 19 Server Actions
• Laisser chaque action se concentrer sur les règles de domaine

Cas d’usage concrets

Cela s’applique facilement aux écrans du quotidien :

• Connexion
• Inscription
• Contact
• Abonnement à la newsletter
• Mise à jour du profil
• Paramètres du compte
• Champs du tableau de bord
• Formulaires CRUD pour administrateurs

Ces flux nécessitent généralement des vérifications simples et répétées plutôt que des graphes de champs très dynamiques.

Pourquoi extraire ce modèle

Des blocs de validation presque identiques apparaissaient dans chaque base de code migrée.

Les copier indéfiniment est fragile ; en transférant les étapes partagées dans un package réutilisable, on maintient les projets alignés et permet aux autres d’améliorer cet outil d’aide.

Publier ce package encourage les retours, les rapports de bugs et les contributions, au lieu de confiner ce modèle à un seul répertoire privé.

La sécurité de type est importante

La force de Zod réside dans les vérifications en temps de exécution associées à des types TypeScript solides.

Au lieu de traiter chaque valeur de FormData comme inconnue indéfiniment, l’action peut fonctionner avec des données qui ont déjà été validées et typées.

Cela signifie généralement :

• Un complétion automatique améliorée dans le parcours réussi
• Moins de surprises en temps de exécution
• Des gestionnaires plus propres
• Un entretien à long terme facilité

Prestations

Puisque la validation s’effectue sur le serveur, le bundle client peut rester plus petit.

Pour les applications déjà engagées dans l’utilisation de Server Actions, cela correspond à la préférence de React 19 consistant à déplacer le traitement des tâches sur le serveur lorsque c’est utile.

Que vient-il après ?

Les travaux en cours sur zod-form-action se concentrent sur l’expérience utilisateur des développeurs.

Les domaines en exploration incluent :

• Une inférence TypeScript plus poussée
• Des outils de validation supplémentaires
• Plus d’exemples
• Des intégrations avec davantage de frameworks
• Une documentation plus claire

Les retours des utilisateurs du package guideront ces mises à jour.

Questions fréquentes

Puis-je utiliser React Hook Form avec React 19 ?

Oui. React Hook Form reste une excellente option, surtout lorsque les formulaires nécessitent une forte interactivité côté client.

React 19 remplace-t-il React Hook Form ?

Non. React 19 ajoute des API et des modèles ; il ne retire pas les bibliothèques de formulaires existantes. Choisissez en fonction de la complexité du formulaire et du lieu où la validation doit avoir lieu.

Pourquoi utiliser Zod pour la validation ?

Zod effectue la validation en temps de exécution et maintient les types TypeScript en accord avec cette validation, de sorte que les données invalides échouent tôt tandis que celles validées restent bien typées.

zod-form-action est-il uniquement destiné à Next.js ?

Non. Toute application React 19 utilisant Server Actions et Zod peut en tirer parti, selon la structure de l’architecture.

Considerations finales

React 19 incite les équipes à utiliser des formulaires plus simples.

Les formulaires HTML natifs, useActionState, Server Actions et Zod ensemble permettent de maintenir une validation fiable et bien typée, sans avoir nécessairement recours à un grand ensemble d’outils pour les formulaires côté client.

Lorsque le même bloc de parsing et de validation FormData apparaît dans de nombreuses actions, extraire ce schéma en un outil réutilisable rend la base de code plus facile à maintenir.

zod-form-action a été conçu dans ce but.

Installez-le depuis la page du package npm.