<Link>

• a태그를 대체하며, prefetching과 client side navigation을 지원함
• 일반적으로 Next.js에서 가장 많이 사용되는 네비게이션 방법

ex)

import Link from 'next/link';

export default function PostList({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link href={`/blog/${post.slug}`}>
            {post.title}
          </Link>
        </li>
      ))}
    </ul>
  );
}

useRouter() Hook

• 클라이언트 컴포넌트 내부에서 페이지를 라우팅 할때는 useRouter 훅을 사용
• Link 사용이 가능할 경우에는 Link 사용을 권장

'use client';

import { useRouter } from 'next/navigation';

export default function Page() {
  const router = useRouter();

  return (
    <button>  onClick={() => router.push('/dashboard')}>
        Dashboard
    </button>
)

How Navigation Works

• <Link>, router.push()를 사용해 라우팅을 할 수 있고 이 경우 브라우저상의 url이 바뀌게 됨
• 라우팅 시에 브라우저에 저장된 캐시를 사용해 변경되지 않는 부분이 있는 경우 데이터를 불러오지 않고 캐시 데이터를 사용함
• url의 하위 세그먼트로 이동하는 등의 soft navigation이 가능한 경우에는 브라우저 캐시를 사용하고, 불가능한 경우 서버에 페이로드를 받아오게 됨
• 라우팅을 기다리는 동안 loading ui를 표시하게 됨

cache

• 클라이언트에서 데이터를 받아올 때 현재 페이지와 함께 하위 세그먼트를 미리 받아와 캐시로 저장을 하게 됨
• 하위 세그먼트로 이동하는 경우 서버에 요청하는 대신 클라이언트 캐시를 사용해 속도를 상승시킬 수 있음
• 만약 캐시를 직접 초기화 하고 싶다면 router.refresh()를 사용

Prefetching

• Link 컴포넌트를 통해 이동하거나 useRouter.prefetch()를 사용해 미리 하위 컴포넌트의 데이터를 가져올 수 있음
• 경로가 정적인 경우 하위 세그먼트 전체를 가져오고, 동적인 경우 첫번째 공유 레이아웃에서 첫번째 loading.js까지의 데이터를 가져오게 됨
• Link 컴포넌트에서 이를 비활성화시키고 싶으면 prefetch={false} 속성을 부여하면 됨

출처:
https://beta.nextjs.org/docs/routing/linking-and-navigating