next.js의 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>
  )
}

• router.push(): 주어진 라우트로 클라이언트 사이드 네비게이션을 수행합니다.

• router.replace(): 브라우저의 히스토리 스택에 추가 없이 주어진 라우트로 클라이언트 사이드 네비게이션을 수행합니다.

• router.refresh(): 현재 라우트를 새로고침합니다. 서버에 새로운 요청을 만들어 데이터를 새로 갖고 와서 서버 컴포넌트를 리렌더링합니다.

• router.prefetch(): 더 빠른 클라이언트 사이드 전환을 위해 제공된 라우트를 미리 가져오기 합니다.

• router.back(): 브라우저 히스토리 스택에서 이전 페이지로 이동합니다.

• router.forward(): 브라우저 히스토리 스택에서 다음 페이지로 이동합니다.

참고자료

1. https://nextjs.org/docs/app/api-reference/functions/use-router