Next.js는 전체 페이지 새로고침보다 빠른 클라이언트 사이드 네비게이션을 제공합니다. 새 페이지의 데이터/컴포넌트만 가져와 교체하고, 공유 레이아웃은 마운트된 상태로 유지합니다.
Link 컴포넌트 (선언적)
tsx
;
() {
(
);
}
<Link>는 <a>를 렌더링하지만 클릭을 가로채 클라이언트 사이드 네비게이션을 수행합니다. 무엇보다 링크가 뷰포트에 들어오면 해당 라우트를 prefetch하므로 이동이 즉각적으로 느껴집니다.
"use client"; // useRouter는 Client Component가 필요함
import { useRouter } from "next/navigation"; // 참고: App Router에서는 next/navigation
export default function LoginForm() {
const router = useRouter();
async function onSubmit() {
await login();
router.push("/dashboard"); // 액션 이후 이동
// router.replace("/x") — 히스토리 항목 없음
// router.back() — 뒤로 가기
// router.refresh() — 현재 라우트의 서버 데이터를 다시 페칭
}
}
링크 클릭이 아니라 로직(폼 제출, 로그인 등)에 대한 응답으로 네비게이션이 일어나야 할 때는 useRouter를 사용하세요.
<Link>가 클릭 전에 라우트를 미리 로드합니다.App Router에서 훅은 next/navigation(useRouter, usePathname, useSearchParams)에서 가져옵니다. 옛 next/router(Pages Router 전용)가 아닙니다. 이 둘을 혼동하는 것은 흔한 실수입니다.
<Link>(자동 prefetch 포함)와 useRouter는 Next.js로 유명한 빠르고 SPA 같은 네비게이션을 만드는 방법입니다.
전체 새로고침을 강제하는 일반 <a href> 대신 이들을 사용하는 것이 앱을 빠르게 유지하고 레이아웃 상태를 보존하는 비결입니다.