[Next.js] 페이지 이동(Link, useRouter)

앞에서 세그먼트를 정하고 파일을 만들어서 실제로 접근할 수 있는 페이지를 만들었다.
그럼 각 페이지 간에 이동은 어떻게 구현할까?

<Link> 컴포넌트 사용하기

<Link> 컴포넌트는 HTML <a> 태그의 확장된 버전이다.
페이지 이동 전에 필요한 데이터를 미리 패칭하는 프리패칭 기능을 지원한다.

import Link from 'next/link';

export default function Page() {
	return <Link href="/dashboard">Dashboard</Link>
}

useRouter() Hook 사용하기

<a> 태그를 사용하기 어려운 경우도 있다.
예를 들어, 버튼 컴포넌트를 클릭해서 이동해야 하는 경우 useRouter를 사용하면 된다.
단, 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>
	)
}