Validun formulaire avec une Server Action et useActionState

Les Server Actions, combinées au hook useActionState, offrent une solution élégante et performante pour gérer la validation des formulaires dans vos applications Next.js.

Validation côté serveur

En effectuant la validation des données côté serveur, vous :

• Renforcez la sécurité : Les règles de validation et les données sensibles ne sont pas exposées au client.
• Améliorez les performances : Vous réduisez la quantité de JavaScript envoyée au client, ce qui accélère le chargement et l’exécution de l’application. Toute la logique de validation est centralisé côté serveur
• Centralisez la logique : Vous pouvez réutiliser les mêmes règles de validation à différents endroits de votre application.

useActionState : un hook pour gérer l’état et les erreurs

Le hook useActionState simplifie la gestion des formulaires en fournissant un mécanisme intégré pour :

• Appeler une Server Action : Il fournit une fonction pour déclencher l’exécution de la Server Action qui gère la soumission du formulaire.
• Gérer l’état de la soumission : Il permet de suivre l’état de la soumission (pending, success, error) et d’afficher des messages de feedback à l’utilisateur.
• Mettre à jour l’état du formulaire : Il met à jour automatiquement l’état du formulaire en fonction de la réponse de la Server Action, notamment en cas d’erreurs de validation.

Exemple

'use client'
import { useActionState } from 'react'
import { createTodo } from './actions'
 
 
export type TodoFormState = {
  content: {value: string, errors?: string[]}
}
 
export default function NewTodoForm() {
  const [state, formAction, isPending] = useActionState<TodoFormState,FormData>(createTodo, {content: {value: ''}});
 
  return (
    <form action={formAction}>
      <input type="text" name="content" value={state.content.value} />
      {state.content.errors?.map((error, index) => <p key={index}>{error}</p>)}
      <button type="submit" disabled={isPending}>
        {isPending ? 'En cours...' : 'Créer'}
      </button>
    </form>
  )
}

'use server'
import type { TodoFormState } from '@/components/todos/NewTodoForm'
 
export async function createTodo(prevState: TodoFormState, formData: FormData) {
  const content = formData.get('content') as string;
  if (content.length < 10) {
    return {
      content: {value: content as string, errors: ['content is not valid']}
    } satisfies TodoFormState
  }
  // ... Logique pour sauvegarder la todo en base de données ...
  return prevState
}

Dans cet exemple :

• La Server Action createTodo vérifie si le contenu de la tâche a une longueur suffisante. Si ce n’est pas le cas, elle renvoie un objet contenant un message d’erreur.
• Le composant NewTodoForm utilise useActionState pour appeler la Server Action et gérer l’état du formulaire.
• Si la Server Action renvoie des erreurs, useActionState met à jour l’état du formulaire et les erreurs sont affichées à l’utilisateur.

En résumé, les Server Actions et useActionState permettent de gérer la validation des formulaires de manière simple et efficace, tout en améliorant la sécurité et les performances de vos applications Next.js.