Formulaires et Mutations

Les formulaires vous permettent de créer et de mettre à jour des données dans les applications web. Next.js offre une manière puissante de gérer les soumissions de formulaires et les mutations de données en utilisant les Routes API.

Bon à savoir :

• Nous recommanderons bientôt d'adopter progressivement le routeur d'application (App Router) et d'utiliser les Actions Serveur pour gérer les soumissions de formulaires et les mutations de données. Les Actions Serveur vous permettent de définir des fonctions serveur asynchrones qui peuvent être appelées directement depuis vos composants, sans avoir besoin de créer manuellement une Route API.
• Les Routes API ne spécifient pas d'en-têtes CORS, ce qui signifie qu'elles sont uniquement de même origine par défaut.
• Comme les Routes API s'exécutent sur le serveur, nous pouvons utiliser des valeurs sensibles (comme des clés API) via des Variables d'Environnement sans les exposer au client. Ceci est crucial pour la sécurité de votre application.

Exemples

Redirection

Si vous souhaitez rediriger l'utilisateur vers une route différente après une mutation, vous pouvez utiliser redirect vers n'importe quelle URL absolue ou relative :

import type { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const id = await addPost()
  res.redirect(307, `/post/${id}`)
}

Définition de cookies

Vous pouvez définir des cookies dans une Route API en utilisant la méthode setHeader sur la réponse :

import type { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  res.setHeader('Set-Cookie', 'username=lee; Path=/; HttpOnly')
  res.status(200).send('Le cookie a été défini.')
}

Lecture de cookies

Vous pouvez lire les cookies dans une Route API en utilisant l'assistant de requête cookies :

import type { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const auth = req.cookies.authorization
  // ...
}

Suppression de cookies

Vous pouvez supprimer des cookies dans une Route API en utilisant la méthode setHeader sur la réponse :

import type { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  res.setHeader('Set-Cookie', 'username=; Path=/; HttpOnly; Max-Age=0')
  res.status(200).send('Le cookie a été supprimé.')
}