Binyard

Appearance

Next.js에서 페이지 이동하기: Link vs router.push ​

이 글은 Page Router(next/router) 기준으로 작성되었습니다.
App Router에서는 useRouter가 next/navigation에서 제공됩니다.


웹에서 페이지를 이동하는 가장 기본적인 방법은 <a> 태그를 사용하는 것이다.
하지만 Next.js에서는 기본 <a> 태그 대신, 클라이언트 사이드 네비게이션을 위한 전용 방식들을 제공한다.

  • Link 컴포넌트를 이용한 페이지 이동
  • useRouter를 이용한 Programmatic Navigation

a 태그의 한계 ​

기본 HTML의 <a> 태그는 페이지 이동 시 항상 서버에 새로운 요청을 보낸다.

html
<a href="/test">이동</a>

이 방식은 전체 페이지가 새로 로드되고 기존 상태가 모두 초기화된다.
SPA(Single Page Application) 환경에서는 비효율적이다.


Next.js는 페이지 이동을 위해 내장 Link 컴포넌트를 제공한다.

tsx
import Link from 'next/link';

<Link href='/test'>이동</Link>;

Link를 사용하면, 페이지를 새로 요청하지 않고 필요한 리소스만 불러오는 클라이언트 사이드 네비게이션 방식으로 이동한다.


Link의 prefetch 동작 ​

tsx
// 뷰포트에 보이면 자동으로 해당 페이지를 미리 로드
<Link href="/test">이동</Link>

// prefetch 비활성화
<Link href="/test" prefetch={false}>이동</Link>

router.push와의 실질적인 차이점이다. Link는 보이기만 해도 미리 로드해서 이동이 더 빠르다.

  • prefetch는 기본적으로 production 환경에서만 동작한다.

Programmatic Navigation이란? ​

하지만 모든 페이지 이동이 링크 클릭으로만 발생하지는 않는다.

예를 들어:

  • 특정 버튼 클릭 후 이동
  • 로그인 성공 후 이동
  • 조건이 만족되었을 때 자동 이동
  • useEffect 내부에서 리다이렉트

이처럼 코드 로직 내부에서 페이지를 이동해야 하는 경우를 Programmatic Navigation이라고 한다.


useRouter + router.push ​

Next.js에서는 useRouter 훅을 통해 라우터 객체에 접근할 수 있다.

tsx
import { useRouter } from 'next/router';

const router = useRouter();

router.push('/test');

router.push는 새로운 경로로 이동하면서 브라우저 히스토리에 기록된다.
클라이언트 사이드 렌더링 방식으로 동작한다.


이벤트 핸들러에서 사용 예시 ​

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

Link 컴포넌트를 사용할 수 없는 상황,
즉 이벤트 핸들러나 함수 내부에서 페이지 이동이 필요할 때 사용한다.


  • Link: 선언적 네비게이션, prefetch 지원
  • router.push: 로직 기반 네비게이션, 이벤트/조건 처리에 적합

router.replace, .back 등 다른 메서드들 ​

라우터 객체에는 push 외에도 다양한 메서드가 있다.

  • router.replace() → 히스토리를 남기지 않고 페이지 이동 (뒤로가기 방지)
  • router.back() → 이전 페이지로 이동

상황에 따라 적절한 메서드를 선택할 수 있다.


예시 ​

tsx
// 로그인 후 이전 페이지로 돌아가기
router.push(returnUrl ?? '/');

// 폼 제출 후 replace로 이동 (새로고침 시 재제출 방지)
router.replace('/success');

정리

  • Link 컴포넌트로 선언적인 네비게이션을 하고
  • useRouter로 프로그래매틱한 페이지 이동을 처리한다.