redirect

redirect 함수를 사용하면 사용자를 다른 URL로 리다이렉트할 수 있습니다. redirect는 서버 컴포넌트, 라우트 핸들러, 그리고 서버 액션에서 사용할 수 있습니다.

스트리밍 컨텍스트에서 사용될 때, 이는 클라이언트 측에서 리다이렉트를 수행하기 위한 메타 태그를 삽입합니다. 서버 액션에서 사용될 때는 호출자에게 303 HTTP 리다이렉트 응답을 제공합니다. 그 외의 경우에는 호출자에게 307 HTTP 리다이렉트 응답을 제공합니다.

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

알아두면 좋은 점:

• 서버 액션과 라우트 핸들러에서 redirect는 try/catch 블록 이후에 호출되어야 합니다.
• 307(임시) HTTP 리다이렉트 대신 308(영구) HTTP 리다이렉트를 반환하고 싶다면, 대신 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는 TypeScript never 타입을 사용하기 때문에 return redirect()를 사용할 필요가 없습니다.

클라이언트 컴포넌트

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")}`);
}

FAQ

redirect가 307과 308을 사용하는 이유는 무엇인가요?

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

/users에서 /people로 리다이렉트하는 다음 예를 살펴보겠습니다. 새 사용자를 생성하기 위해 /users에 POST 요청을 하고 302 임시 리다이렉트를 따르는 경우, 요청 메서드가 POST에서 GET 요청으로 변경됩니다. 이는 새 사용자를 생성하기 위해 /people에 POST 요청을 해야 하는데, GET 요청을 하게 되므로 의미가 없습니다.

307 상태 코드의 도입은 요청 메서드가 POST로 유지됨을 의미합니다.

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

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

HTTP 리다이렉트에 대해 자세히 알아보기.

버전 기록