Next.js에서 리디렉션을 처리하는 몇 가지 방법이 있습니다. 이 페이지에서는 각 옵션, 사용 사례 및 대량 리디렉션 관리 방법을 살펴보겠습니다.

redirect function

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

**redirect**는 종종 변이나 이벤트 후에 사용됩니다. 예를 들어, 포스트를 생성한 후에 다음과 같이 사용할 수 있습니다:

'use server'
 
import { redirect } from 'next/navigation'
import { revalidatePath } from 'next/cache'
 
export async function createPost(id: string) {
  try {
    // Call database
  } catch (error) {
    // Handle errors
  }
 
  revalidatePath('/posts') // Update cached posts
  redirect(`/post/${id}`) // Navigate to the new post page
}

[코드] app/actions.tsx

알아두면 좋은 사항:

• **redirect**는 기본적으로 307 (임시 리디렉트) 상태 코드를 반환합니다. 서버 액션에서 사용될 때는 POST 요청의 결과로 성공 페이지로 리디렉션하는 데 일반적으로 사용되는 303 (다른 곳 보기)을 반환합니다.
• **redirect**는 내부적으로 오류를 throw하므로 try/catch 블록 외부에서 호출해야 합니다.
• **redirect**는 클라이언트 컴포넌트의 렌더링 프로세스 중에 호출할 수 있지만 이벤트 핸들러에서는 호출할 수 없습니다. 대신 useRouter 훅을 사용할 수 있습니다.
• 렌더링 프로세스 이전에 리디렉션을 수행하려면 next.config.js 또는 미들웨어를 사용하세요.

추가 정보를 원하시면 redirect API 레퍼런스를 참조하세요.

permanentRedirect function

permanentRedirect 함수를 사용하면 사용자를 영구적으로 다른 URL로 리디렉션할 수 있습니다. **permanentRedirect**는 서버 컴포넌트, 라우트 핸들러 및 서버 액션에서 호출할 수 있습니다.