useRouter() hook

useRouter 훅을 사용하면 클라이언트 컴포넌트에서 프로그래밍 방식으로 경로를 변경할 수 있다.

'use client'
 
import { useRouter } from 'next/navigation'
 
export default function Page() {
  const router = useRouter()
 
  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      Dashboard
    </button>
  )
}

useRouter의 모든 메서드에 대한 전체 목록 → 자세히 보기

<aside> 💡 useRouter를 사용해야 하는 특정 요구 사항이 없는 한 <Link> 컴포넌트를 사용하여 경로 간에 탐색하는 것을 권장한다.

</aside>

redirect function

서버 컴포넌트의 경우, redirect 함수를 사용한다.

import { redirect } from 'next/navigation'
 
async function fetchTeam(id: string) {
  const res = await fetch('https://...')
  if (!res.ok) return undefined
  return res.json()
}
 
export default async function Profile({ params }: { params: { id: string } }) {
  const team = await fetchTeam(params.id)
  if (!team) {
    redirect('/login')
  }
 
  // ...
}

<aside> 💡 redirect

• redirect 함수는 기본적으로 307 (임시 리디렉션) 상태 코드를 반환한다. 서버 액션에서 사용할 때는 일반적으로 POST 요청의 결과로 성공 페이지로 리디렉션하기 위해 303(See Other)을 반환한다.

• redirect는 내부적으로 오류를 throw 하므로 try/catch 블록 외부에서 호출해야 한다.

• redirect는 렌더링 프로세스 중에 클라이언트 컴포넌트에서 호출할 수 있지만 이벤트 핸들러에서는 호출할 수 없다. 대신 useRouter 훅을 사용할 수 있다.

• redirect는 절대 URL도 허용하며 외부 링크로 리디렉션하는 데 사용할 수 있다.

• 렌더링 프로세스 전에 리디렉션을 수행하려면 next.config.js 또는 미들웨어를 사용권장 → 자세히 보기

</aside>

항해99 취업 리부트 코스를 수강하고 작성한 콘텐츠 입니다.

Routing: Linking and Navigating

항해99

#개발자포트폴리오 #개발자이력서 #개발자취업 #개발자취준 #코딩테스트 #항해99 #취리코 #취업리부트코스