redirect

redirect 함수는 사용자를 다른 URL로 리디렉션할 수 있도록 합니다. redirect는 Server Components, Route Handlers, Server Actions에서 사용할 수 있습니다.

스트리밍 컨텍스트에서 사용될 때, 이는 메타 태그를 삽입하여 클라이언트 측에서 리디렉션을 발생시킵니다. 서버 액션에서 사용될 때는 호출자에게 303 HTTP 리디렉션 응답을 제공합니다. 그렇지 않으면 호출자에게 307 HTTP 리디렉션 응답을 제공합니다.

리소스가 존재하지 않는 경우, 대신 notFound 함수를 사용할 수 있습니다.

참고 사항:

• Server Actions 및 Route Handlers에서 redirect는 try/catch 블록 후에 호출되어야 합니다.
• 307(임시) HTTP 리디렉션 대신 308(영구) HTTP 리디렉션을 반환하려면 permanentRedirect 함수를 사용할 수 있습니다.

Parameters

redirect 함수는 두 개의 인수를 받습니다:

redirect(path, type)

기본적으로, redirect는 Server Actions에서 push(브라우저 히스토리 스택에 새 항목 추가)를 사용하고, 다른 곳에서는 replace(브라우저 히스토리 스택에서 현재 URL 교체)를 사용합니다. 이 동작은 type 매개변수를 지정하여 재정의할 수 있습니다.

type 매개변수는 Server Components에서 사용될 때는 영향을 미치지 않습니다.

Returns

redirect는 값을 반환하지 않습니다.

Example

Server Component

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는 TypeScript never (opens in a new tab) 타입을 사용하므로 return redirect()를 사용할 필요가 없습니다.

Client Component

redirect는 Server Action을 통해 Client Component에서 사용할 수 있습니다. 이벤트 핸들러를 사용하여 사용자를 리디렉션해야 하는 경우, 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')}`)
}

FAQ

Why does redirect use 307 and 308?

redirect()를 사용할 때, 사용되는 상태 코드가 307(임시 리디렉션)과 308(영구 리디렉션)인 것을 알 수 있습니다. 전통적으로 302가 임시 리디렉션, 301이 영구 리디렉션으로 사용되었지만, 많은 브라우저들이 302를 사용할 때 요청 메서드를 원래의 요청 메서드와 상관없이 POST에서 GET으로 변경했습니다.

/users에서 /people로의 리디렉션 예를 들어보면, 새로운 사용자를 생성하기 위해 /users로 POST 요청을 하고, 302 임시 리디렉션을 따를 경우 요청 메서드가 POST에서 GET 요청으로 변경됩니다. 이는 새로운 사용자를 생성하기 위해서는 /people로 POST 요청을 해야 하므로 맞지 않는 동작입니다.

307 상태 코드가 도입되면서 요청 메서드가 POST로 유지됩니다.

• 302 - 임시 리디렉션, 요청 메서드를 POST에서 GET으로 변경합니다.
• 307 - 임시 리디렉션, 요청 메서드를 POST로 유지합니다.

redirect() 메서드는 기본적으로 302 대신 307을 사용하므로, 요청이 항상 POST 요청으로 유지됩니다.

HTTP 리디렉션에 대해 더 알아보기 (opens in a new tab).

Version History