[Next.js] Next.js + TypeScript에서의 페이지 이동 방법 총정리

Next.js에서의 페이지 이동 방법 개요

Next.js에서 페이지 간 이동을 구현하는 방법은 크게 두 가지가 있다.

1. Link 컴포넌트 사용하기
2. useRouter 훅을 사용하여 프로그래매틱하게 라우팅하는 방법

일반 React에서 사용하는 useNavigate나 React Router의 Link와 비슷한 역할을 한다고 생각하면 이해하기 쉽다.

 

두 방법 모두 클라이언트 사이드 라우팅을 지원하여 전체 페이지를 다시 로드하지 않고 페이지 간 빠른 전환이 가능하다.

이는 사용자 경험을 향상시키고 애플리케이션의 반응성을 높여준다.

---

Link 컴포넌트를 사용한 클라이언트 사이드 라우팅

Link 컴포넌트는 Next.js에서 가장 기본적인 페이지 이동 방법이다.

이 컴포넌트는 HTML의 <a> 태그를 확장한 것으로, 클릭 시 JavaScript를 사용하여 클라이언트 사이드 네비게이션을 수행한다!!

// app/page.tsx
import Link from 'next/link';

export default function HomePage() {
  return (
    <div>
      <h1>홈페이지</h1>
      <nav>
        <Link href="/dashboard">대시보드로 이동</Link>
        <Link href="/about">소개 페이지로 이동</Link>
        <Link href="/blog">블로그로 이동</Link>
      </nav>
    </div>
  );
}

위 코드는 세 개의 링크를 생성하여 사용자가 각각 대시보드, 소개 페이지, 블로그 페이지로 이동할 수 있게 해준다.

Link 컴포넌트는 내부적으로 클라이언트 사이드 라우팅을 처리하여 페이지 전환 시 브라우저가 전체 페이지를 다시 로드하지 않도록 한다.

🚨중요한 점🚨은 Link 컴포넌트를 사용할 때 기본적으로 'use client' 지시문이 필요하지 않다는 것이다.
Link 컴포넌트 자체가 이미 클라이언트 컴포넌트를 내보내고 있기 때문에, 이 컴포넌트를 직접 사용하는 경우에는 별도의 지시문 없이도 서버 컴포넌트 내에서 사용 가능하다.

Link 컴포넌트는 다양한 속성을 지원한다.

// 다양한 Link 속성 예시
<Link 
  href="/products/123" 
  prefetch={false}  // 미리 페이지 로드 비활성화
  scroll={false}    // 페이지 전환 시 스크롤 위치 유지
  replace           // 브라우저 히스토리에 새 항목 추가하지 않음
  className="my-link"
>
  제품 상세 보기
</Link>

이 속성들을 통해 페이지 이동 동작을 더 세밀하게 제어할 수 있다.

특히 prefetch 속성은 기본적으로 true로 설정되어 있어 링크가 뷰포트에 들어올 때 해당 페이지를 미리 로드한다.

이를 통해 사용자가 링크를 클릭했을 때 거의 즉시 페이지가 로드되어 더 나은 사용자 경험을 제공한다.

---

useRouter와 router.push를 활용한 프로그래매틱 라우팅

버튼 클릭, 폼 제출, 특정 조건 충족 등 사용자 상호작용에 따라 프로그래매틱하게 페이지 이동을 처리해야 할 때는 useRouter 훅을 사용한다.

App Router에서 이 훅은 next/navigation 패키지에서 import해야 한다.

// app/login/page.tsx
'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';

export default function LoginPage() {
  const router = useRouter();
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    // 로그인 로직 (예시)
    const success = await mockLoginAPI(username, password);
    
    if (success) {
      // 로그인 성공 시 대시보드로 리다이렉트
      router.push('/dashboard');
    }
  };

  // 목업 API 함수
  const mockLoginAPI = async (username: string, password: string) => {
    // 실제로는 서버에 인증 요청을 보내야 함
    return username.length > 0 && password.length > 0;
  };

  return (
    <div>
      <h1>로그인</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="username">사용자명:</label>
          <input
            id="username"
            type="text"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
          />
        </div>
        <div>
          <label htmlFor="password">비밀번호:</label>
          <input
            id="password"
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>
        <button type="submit">로그인</button>
      </form>
    </div>
  );
}

위 코드에서는 로그인 폼 제출 시 router.push()를 사용하여 로그인 성공 후 대시보드 페이지로 이동하는 예시를 보여준다.

이 방식은 조건부 라우팅이나 사용자 상호작용 후 페이지 이동을 구현할 때 특히 유용하다.

 

useRouter 훅을 통해 제공되는 주요 메서드는 다음과 같다.

// useRouter 훅의 다양한 메서드
router.push('/dashboard');          // 새 페이지로 이동
router.replace('/dashboard');       // 현재 히스토리 항목을 대체하며 이동
router.back();                      // 브라우저 히스토리에서 이전 페이지로 이동
router.forward();                   // 브라우저 히스토리에서 다음 페이지로 이동
router.refresh();                   // 현재 라우트를 새로고침
router.prefetch('/dashboard');      // 특정 페이지를 미리 로드

// 쿼리 파라미터와 함께 이동
router.push('/products?category=electronics&sort=price');

// 동적 라우트로 이동
router.push(`/products/${productId}`);

이러한 메서드들을 활용하여 다양한 페이지 이동 시나리오를 구현할 수 있다.

---

Link와 useRouter 사용 시 'use client' 지시문이 필요한 경우

Next.js App Router에서는 기본적으로 모든 컴포넌트가 서버 컴포넌트로 취급된다.

그러나 Link와 useRouter는 다른 특성을 가진다.

 

Link 컴포넌트:

 

• Link 컴포넌트는 그 자체로 클라이언트 컴포넌트이다.
• 따라서 Link를 직접 사용하는 컴포넌트에는 'use client' 지시문이 필요하지 않다.
• 서버 컴포넌트 내에서도 직접 Link를 사용할 수 있다.

useRouter 훅:

 

• useRouter는 React 훅이므로 클라이언트 컴포넌트에서만 사용할 수 있다.
• 따라서 useRouter를 사용하는 컴포넌트는 반드시 'use client' 지시문을 파일 상단에 추가해야 한다.

구글링을 해보니 실전에서는 이 두 가지 방법을 함께 사용하는 경우가 많다고 한다.

예를 들어, 네비게이션 메뉴는 Link를 사용하고, 조건부 리다이렉트가 필요한 폼이나 상호작용 컴포넌트에서는 useRouter를 사용하는 식이다.

 

다음 글은 라우팅 시 데이터 전달 방법에 대해 알아볼 예정이다!!!