[ Next.js ] Link와 useRouter를 활용한 CSR 방식 네비게이팅

1. 클라이언트 사이드 렌더링 방식의 링크 생성하기 (Link 컴포넌트)

Next.js에서는 페이지 이동을 위해 일반적인 <a> 태그 대신, 내장 컴포넌트인 Link를 사용하는 것이 권장됩니다.

Link 컴포넌트는 내부적으로 클라이언트 사이드 렌더링(CSR)을 통해 페이지를 빠르게 전환해주며, 전체 페이지를 다시 로드하지 않기 때문에 부드럽고 빠른 사용자 경험을 제공합니다.

 

 

import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <Link href="/about">About 페이지로 이동</Link>
    </div>
  );
}

• href 속성에 이동할 경로를 지정해주면 됩니다.
• Next.js의 Link는 CSR 방식으로 페이지를 전환하므로 네트워크 병목 없이 빠르게 이동할 수 있습니다.
• a 태그처럼 보이지만, 실제로는 내부적으로 SPA처럼 동작합니다.

 

 

 

---

2. 함수나 이벤트 발생 시 페이지 이동하기 (Programmatic Navigation)

링크 클릭 외에도 사용자가 버튼을 클릭하거나 특정 조건을 만족할 때 프로그래밍적으로 페이지를 이동해야 할 때가 있습니다. 이럴 때는 next/router의 useRouter 훅을 사용합니다.

 

 

✱ 버튼 클릭 이벤트를 통한 이동 예시

import { useRouter } from 'next/router'; // App Router 사용 시엔 next/navigation

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

  const onClickButton = () => {
    router.push("/test");
  };

  return (
    <div>
      <button onClick={onClickButton}>/test 페이지로 이동</button>
    </div>
  );
}

 

 

🔍 설명

• useRouter() 훅으로 router 객체를 가져옵니다.
• router.push()를 사용해 원하는 경로로 이동합니다.
• 이는 CSR 방식으로 페이지를 이동시키며, 기존 페이지의 상태도 유지됩니다.
• button의 onClick 이벤트에 핸들러 함수를 연결하면 동작합니다.

 

💡 router객체의 주요 메서드

메서드	설명
push(path)	지정한 경로로 이동합니다. 브라우저 히스토리에 남습니다.
replace(path)	히스토리를 덮어쓰기 때문에 뒤로가기를 방지하고 이동합니다.
back( )	브라우저의 이전 페이지로 이동합니다. (window.history.back( )과 유사)

 

 

---

3. 정리

• Link 컴포넌트: 정적인 내부 링크를 구성할 때 사용.
• useRouter와 router.push(): 동적인 상황(이벤트, 조건 등)에서 페이지 이동을 제어할 때 사용.
• CSR 방식으로 처리되기 때문에 전체 페이지 새로고침 없이 부드러운 전환 가능.