Переадресация

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

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

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

Важно знать:

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

Параметры

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

redirect(path, type)

По умолчанию, redirect будет использовать push (добавление новой записи в стек истории браузера) в Серверных действиях и 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 server'
 
import { redirect } from 'next/navigation'
 
export async function navigate(data: FormData) {
  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-переадресациях.

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