Formularios y Mutaciones

Los formularios le permiten crear y actualizar datos en aplicaciones web. Next.js proporciona una forma poderosa de manejar envíos de formularios y mutaciones de datos utilizando Rutas API.

Es bueno saber:

• Pronto recomendaremos adoptar incrementalmente el App Router y usar Acciones de Servidor para manejar envíos de formularios y mutaciones de datos. Las Acciones de Servidor le permiten definir funciones asíncronas en el servidor que pueden ser llamadas directamente desde sus componentes, sin necesidad de crear manualmente una Ruta API.
• Las Rutas API no especifican cabeceras CORS, lo que significa que por defecto solo son del mismo origen.
• Dado que las Rutas API se ejecutan en el servidor, podemos usar valores sensibles (como claves API) a través de Variables de Entorno sin exponerlos al cliente. Esto es crítico para la seguridad de su aplicación.

Ejemplos

Redireccionamiento

Si desea redirigir al usuario a una ruta diferente después de una mutación, puede usar redirect a cualquier URL absoluta o relativa:

import type { NextApiRequest, NextApiResponse } from 'next'

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

Configuración de cookies

Puede configurar cookies dentro de una Ruta API usando el método setHeader en la respuesta:

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('Se ha configurado la cookie.')
}

Lectura de cookies

Puede leer cookies dentro de una Ruta API usando el helper de solicitud cookies:

import type { NextApiRequest, NextApiResponse } from 'next'

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

Eliminación de cookies

Puede eliminar cookies dentro de una Ruta API usando el método setHeader en la respuesta:

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('Se ha eliminado la cookie.')
}