Next.js에서 페이지 간 이동은 어떻게 하나요?

Question

Accepted Answer

Next.js는 전체 페이지 새로고침보다 빠른 **클라이언트 사이드 네비게이션**을 제공합니다. 새 페이지의 데이터/컴포넌트만 가져와 교체하고, 공유 레이아웃은 마운트된 상태로 유지합니다. ## Link 컴포넌트 (선언적) ```tsx import Link from "next/link"; export default function Nav() { return ( ); } ``` ``는 ``를 렌더링하지만 클릭을 가로채 클라이언트 사이드 네비게이션을 수행합니다. 무엇보다 링크가 뷰포트에 들어오면 해당 라우트를 **prefetch**하므로 이동이 즉각적으로 느껴집니다. ## 프로그래밍 방식 네비게이션 (이벤트 핸들러에서) ```tsx "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`를 사용하세요. ## 클라이언트 사이드 네비게이션이 빠른 이유 - **전체 새로고침 없음** — 변경된 세그먼트만 다시 렌더링되고 공유 레이아웃은 마운트된 채로 유지됩니다. - **prefetch** — ``가 클릭 전에 라우트를 미리 로드합니다. - **상태 보존** — 변경되지 않은 레이아웃은 네비게이션 간에 상태를 유지합니다. ## 중요: next/navigation에서 import App Router에서 훅은 `next/navigation`(`useRouter`, `usePathname`, `useSearchParams`)에서 가져옵니다. 옛 `next/router`(Pages Router 전용)가 *아닙니다*. 이 둘을 혼동하는 것은 흔한 실수입니다. ## 왜 중요한가 ``(자동 prefetch 포함)와 `useRouter`는 Next.js로 유명한 빠르고 SPA 같은 네비게이션을 만드는 방법입니다. 전체 새로고침을 강제하는 일반 `` 대신 이들을 사용하는 것이 앱을 빠르게 유지하고 레이아웃 상태를 보존하는 비결입니다.