Формы и мутации данных

Формы позволяют создавать и обновлять данные в веб-приложениях. Next.js предоставляет мощный способ обработки отправки форм и мутаций данных с использованием API Routes.

Полезно знать:

Вскоре мы будем рекомендовать постепенный переход на App Router и использование Server Actions для обработки отправки форм и мутаций данных. Server Actions позволяют определять асинхронные серверные функции, которые можно вызывать напрямую из компонентов, без необходимости вручную создавать API Route.

API Routes не указывают заголовки CORS, что означает, что по умолчанию они работают только в рамках одного источника.

Поскольку API Routes выполняются на сервере, мы можем использовать конфиденциальные значения (например, API-ключи) через переменные окружения, не раскрывая их клиенту. Это критически важно для безопасности вашего приложения.

Примеры

Перенаправление

Если вы хотите перенаправить пользователя на другой маршрут после мутации, вы можете использовать redirect на любой абсолютный или относительный URL:

import type { NextApiRequest, NextApiResponse } from 'next'

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

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

Установка cookies

Вы можете установить cookies в API Route с помощью метода setHeader для ответа:

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('Cookie установлен.')
}

Чтение cookies

Вы можете читать cookies в API Route с помощью помощника cookies для запроса:

import type { NextApiRequest, NextApiResponse } from 'next'

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

Удаление cookies

Вы можете удалить cookies в API Route с помощью метода setHeader для ответа:

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('Cookie удален.')
}