redirect

Функция redirect позволяет перенаправлять пользователя на другой URL. redirect может использоваться в Серверных компонентах (Server Components), Обработчиках маршрутов (Route Handlers) и Серверных действиях (Server Actions).

При использовании в контексте потоковой передачи (streaming context) функция вставляет метатег для выполнения перенаправления на стороне клиента. При использовании в серверном действии она возвращает HTTP-ответ с кодом 303 для перенаправления вызывающей стороне. В остальных случаях возвращается HTTP-ответ с кодом 307.

Если ресурс не существует, вместо этого можно использовать функцию notFound.

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

• В Серверных действиях и Обработчиках маршрутов redirect следует вызывать после блока try/catch.
• Если требуется вернуть HTTP-перенаправление с кодом 308 (Постоянное) вместо 307 (Временное), можно использовать функцию permanentRedirect.

Параметры

Функция redirect принимает два аргумента:

redirect(path, type)

По умолчанию redirect использует push (добавляет новую запись в стек истории браузера) в Серверных действиях (Server Actions) и replace (заменяет текущий URL в стеке истории браузера) во всех остальных случаях. Это поведение можно переопределить, указав параметр type.

Параметр type не имеет эффекта при использовании в Серверных компонентах.

Возвращаемое значение

Функция redirect не возвращает никакого значения.

Примеры

Серверный компонент

Вызов функции redirect() вызывает ошибку NEXT_REDIRECT и прерывает рендеринг сегмента маршрута, в котором она была вызвана.

import { redirect } from 'next/navigation'

async function fetchTeam(id) {
  const res = await fetch('https://...')
  if (!res.ok) return undefined
  return res.json()
}

export default async function Profile({ params }) {
  const team = await fetchTeam(params.id)
  if (!team) {
    redirect('/login')
  }

  // ...
}

Полезно знать: redirect не требует использования return redirect(), так как использует тип TypeScript never.

Клиентский компонент

redirect может использоваться в Клиентском компоненте через Серверное действие. Если требуется перенаправить пользователя с помощью обработчика событий, можно использовать хук useRouter.

'use client'

import { navigate } from './actions'

export function ClientRedirect() {
  return (
    <form action={navigate}>
      <input type="text" name="id" />
      <button>Submit</button>
    </form>
  )
}

'use client'

import { navigate } from './actions'

export function ClientRedirect() {
  return (
    <form action={navigate}>
      <input type="text" name="id" />
      <button>Submit</button>
    </form>
  )
}

'use server'

import { redirect } from 'next/navigation'

export async function navigate(data: FormData) {
  redirect(`/posts/${data.get('id')}`)
}

'use server'

import { redirect } from 'next/navigation'

export async function navigate(data) {
  redirect(`/posts/${data.get('id')}`)
}

Часто задаваемые вопросы

Почему redirect использует коды 307 и 308?

При использовании redirect() можно заметить, что применяются коды состояния 307 для временного перенаправления и 308 для постоянного. Хотя традиционно использовались 302 для временного перенаправления и 301 для постоянного, многие браузеры изменяли метод запроса с POST на GET при использовании 302, независимо от исходного метода запроса.

Рассмотрим пример перенаправления с /users на /people: если сделать POST-запрос к /users для создания нового пользователя и получить 302 временное перенаправление, метод запроса изменится с POST на GET. Это нелогично, так как для создания пользователя должен использоваться POST-запрос к /people, а не GET.

Введение кода состояния 307 означает, что метод запроса сохраняется как POST.

• 302 - Временное перенаправление, изменяет метод запроса с POST на GET
• 307 - Временное перенаправление, сохраняет метод запроса как POST

Метод redirect() по умолчанию использует 307 вместо 302, что гарантирует сохранение POST-запросов.

Подробнее о HTTP-перенаправлениях.

История версий