[Next.js] Linking & Navigating : next/link, next/navigation

 

웹사이트에서 페이지 간의 부드러운 전환은 사용자 경험 향상에 큰 영향을 미친다.

Next.js에서는 next/link와 next/navigation과 같은 라우팅 API를 제공하여 효율적인 라우팅과 최적화된 성능을 제공한다.

이번 포스팅에서는 next/link와 next/navigation의 필요성과 사용법에 대해 다루며 어떤 상황에서 사용하는 것이 적합한지 등에 대해 다뤄보고자 한다.

 

01. 최적화된 내비게이션 구현 : next/link의 필요성

Next.js에서는 페이지 간 이동을 최적화하기 위해 전통적인 <a> 태그 대신 next/link 컴포넌트를 제공한다.

이 컴포넌트는 <a href=""> 대신 <Link href="">를 사용하여 전체 페이지 새로고침 없이 빠르고 매끄러운 전환을 가능하게 한다.

 

🔥 <a> 태그를 사용하지 않는 이유

<a> 태그는 HTML에서 기본적인 페이지 이동을 처리하지만, Next.js에서는 서버 사이드 렌더링과의 호환성 문제로 인해 적합하지 않다.

 

Next.js는 서버 사이드 렌더링을 지원하는 프레임워크이다.

SSR을 사용하는 경우, <a> 태그를 통해 페이지를 이동하면 클라이언트 측 라우팅이 적용되지 않아 서버에서 새로고침이 발생한다.

이는 페이지 전환 시 사용자 경험이 끊기는 결과를 초래하여 SEO에도 부정적인 영향을 끼칠 수 있다.

 

반면 <Link> 컴포넌트를 사용하면 클라이언트 측 라우팅을 통해 전체 페이지 새로고침 없이 빠른 전환을 제공하면서도 Next.js의 SSR 기능을 활용하여 SEO에 유리한 환경을 조성할 수 있다.

 

 

💡 next/link의 필요성

기존의 <a> 태그를 사용하면 페이지를 이동할 때마다 전체 HTML 문서가 새로 로드되며, 이는 서버와의 요청-응답 과정이 반복되기 때문에 사용자 경험이 느려질 수 있다. 반면 next/link는 JavaScript로 동작하며 페이지 간 이동시 브라우저의 네트워크 요청을 최소화하여 SPA처럼 작동한다. 그 결과 페이지 전환 속도가 빨라지고 더 나은 사용자 경험을 제공한다.

 

next/link의 또 다른 강점은 자동 코드 분할(code-splitting)과 사전 로딩(prefetching) 기능이다. Next.js는 라우트 세그먼트에 따라 어플리케이션을 코드 단위로 분할하여 필요한 페이지의 코드만 로드한다. 이로 인해, 초기 로드 시간이 단축되고 특정 페이지에서 오류가 발생하더라도 나머지 페이지는 격리된 상태에서 안정적으로 작동할 수 있다

특히 프로덕션 환경에서는 <Link> 컴포넌트가 뷰포트에 나타나는 순간, Next.js가 백그라운드에서 링크된 페이지의 코드를 자동으로 사전 로딩한다. 이렇게 사전 로딩된 코드는 사용자가 링크를 클릭할 때 이미 준비되어 있어 즉각적인 페이지 전환이 가능해진다.

 

 

 

02. next/link 사용 방법

1️⃣ next/link에서 Link import

next/link를 사용하기 위해서 Link 컴포넌트를 import 해온다.

import Link from 'next/link';

 

2️⃣ 기본 사용 예시

<Link> 의 href 안에 내비게이션 할 경로를 설정한다.

아래 코드에서는 /about 페이지로 이동할 때 전체 페이지 새로고침 없이 내비게이션이 이루어진다.

import Link from 'next/link';

export default function HomePage() {
  return (
    <div>
      <h1>Welcome to the Home Page!</h1>
      <Link href="/about">Go to About Page</Link>
    </div>
  );
}

 

 

#1. Link의 주요 속성

◼︎ href (필수)

href는 이동할 경로를 나타내며, 문자열 또는 객체 형태로 전달할 수 있다.

문자열 형태로 전달하는 기본 사용법은 다음과 같다.

<Link href="/about">About 페이지로 이동</Link>

 

객체 형태로 전달할 때는 쿼리 파라미터와 같은 추가적인 정보를 더 세부적으로 설정할 수 있다.

import Link from 'next/link';

export default function HomePage() {
  return (
    <Link
      href={{
        pathname: '/profile',
        query: { user: 'guswjd' },
      }}
    >
      Go to Profile
    </Link>
  );
}

• pathname: 이동할 페이지 경로를 지정 (/profile)
• query: 쿼리 파라미터로 추가 정보를 전달(user=guswjd)

위 코드에서 사용자가 Go to Profile을 클릭하면 실제 URL은 /profile?user=guswjd로 이동하게 된다.

 

◼︎ replace

replace를 사용하면 현재의 히스토리 기록을 대체하여 뒤로 가기 버튼을 클릭해도 이전 페이지로 돌아갈 수 없다.

사용자가 페이지를 전환할 때, 이전 URL 기록을 유지하지 않아도 될 경우에 유용하다.

<Link href="/about" replace>About 페이지로 이동</Link>

 

◼︎ scroll

기본적으로 <Link> 컴포넌트는 페이지 이동 시 스크롤을 최상단으로 이동시킨다.

만약 스크롤 위치를 유지하고 싶다면 scroll 속성을 false로 설정할 수 있다.

<Link href="/about" scroll={false}>About 페이지로 이동</Link>

 

◼︎ prefetch

prefetch를 false로 설정하면 페이지가 뷰포트에 들어와도 미리 로드되지 않는다.

<Link href="/contact" prefetch={false}>
  Contact Us
</Link>

 

 

#2. 동적 라우팅에서 next/link 사용하기

Next.js에서는 동적 라우팅을 지원하여 경로에 파라미터를 전달할 수 있다.

import Link from 'next/link';

export default function PostList() {
  const posts = [
    { id: 1, title: 'Next.js 튜토리얼' },
    { id: 2, title: 'React Query 활용법' },
  ];

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link href={`/posts/${post.id}`}>{post.title}</Link>
        </li>
      ))}
    </ul>
  );
}

 

위 예시에서는 동적 라우트인 /posts/[id]로 이동할 수 있다. 클릭 시, 해당 포스트 ID에 맞는 페이지로 이동한다.

 

 

 

02. next/navigation : usePathname

usePathname은 Next.js의 navigation 훅 중 하나로, 현재 페이지의 경로를 가져오는 역할을 한다.

예를 들어, URL이 https://example.com/products/1일 때,  usePathname 훅을 사용하면 /products/1 값을 반환한다.

이 훅은 클라이언트 컴포넌트에서만 사용할 수 있다.

따라서 'use client'를 적어줘야 한다.

// app/components/CurrentPath.tsx
'use client';

import { usePathname } from 'next/navigation';

export default function CurrentPath() {
  const pathname = usePathname();

  return <p>현재 경로: {pathname}</p>;
}

 

 

 

03. next/navigation : useRouter & redirect

Next.js에서는 라우팅을 처리할 때 클라이언트 컴포넌트와 서버 컴포넌트에서 사용하는 방식이 다르다.

클라이언트 컴포넌트에서는 useRouter() 훅을, 서버 컴포넌트에서는 redirect() 함수를 사용해 페이지 전환을 처리한다.

 

#1. useRouter()

useRouter() 훅은 Next.js에서 클라이언트 컴포넌트에서 프로그램적으로 라우트를 변경할 수 있게 해주는 훅이다.

사용자가 클릭하거나 다른 이벤트에 따라 동적으로 페이지를 변경할 수 있다.

 

useRouter()는 next/navigation에서 import하여 아래와 같이 사용할 수 있다.

// app/page.tsx
'use client'

import { useRouter } from 'next/navigation'

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

  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      대시보드로 이동
    </button>
  )
}

 

 

💡 useRouter() 메서드

◼︎ router.push(url)

주어진 url로 페이지를 이동시킨다.

 

◼︎ router.replace(url)

현재 url을 새 url로 교체하여 이동한다.

사용자가 뒤로 가기를 눌렀을 때 교체된 url로 돌아가지 않도록 할 수 있다.

예를 들어, router.replace('/home')는 현재 페이지를 /home으로 교체한다.

 

◼︎ router.back()

브라우저의 뒤로가기 기능처럼 사용자를 이전 페이지로 이동시킨다.

 

◼︎ router.query

현재 URL에서 쿼리 파라미터에 접근할 수 있다.

예를 들어, /profile?id=123와 같은 URL에서 id 값을 가져올 수 있다.

 

가능하면 useRouter 보다 <Link> 컴포넌트를 사용하여 라우팅하는 것이 좋다.
<Link>는 클라이언트 측에서 내비게이션을 처리하고, 페이지 전환시 최적화된 성능을 제공한다.
useRouter()는 동적인 라우팅이나 특정 조건에 따라 라우팅을 제어해야 할 경우 사용하는 것이 좋다.

 

 

 

#2. redirect()

Next.js에서는 서버 컴포넌트에서 페이지 리다이렉션을 처리할 때 redirect() 함수를 사용한다.

이 함수는 서버 측에서 클라이언트로 리다이렉션을 전달할 때 유용하다.

즉, useRouter()가 클라이언트 측에서만 사용 가능한 반면, redirect()는 서버 측에서 페이지 리다이렉션을 할 수 있도록 도와준다.

사용자가 특정 페이지를 요청했을 때, 서버에서 조건을 확인하고 그에 맞게 다른 페이지로 이동시킨다.

 

아래 예시 코드로 redirect()가 동작하는 과정을 더 알아보고자 한다.

// app/team/[id]/page.tsx
import { redirect } from 'next/navigation'

// 팀 정보를 가져오는 함수
async function fetchTeam(id: string) {
  const res = await fetch('https://...')
  if (!res.ok) return undefined
  return res.json()
}

// Profile 페이지
export default async function Profile({ params }: { params: { id: string } }) {
  const team = await fetchTeam(params.id)
  
  if (!team) {
    // 팀을 찾을 수 없으면 로그인 페이지로 리다이렉션
    redirect('/login')
  }

  // 팀 정보가 있으면 프로필 렌더링
  // ...
}

 

 

위 코드에서 팀 정보를 가져오는 함수 fetchTeam이 있다.

만약 팀 정보를 찾을 수 없다면, redirect('/login')을 사용하여 사용자를 로그인 페이지로 보내게 된다.

이때 이 작업은 서버 측에서 실행되어, 사용자가 페이지를 요청할 때 서버가 이를 처리하고 적절한 페이지로 리다이렉션한다.

 

 

🎯 redirect 참고 사항

• 기본적으로 redirect()는 307 Temporary Redirect 상태 코드를 사용한다. 이는 "잠깐 다른 곳으로 이동한다"는 의미와도 같다. 서버 액션에서는 303 See Other 상태 코드를 사용한다. 주로 폼 제출 후 성공적인 결과 페이지로 리다이렉션할 때 사용된다.
• redirect()는 내부적으로 예외를 던지기 때문에, try/catch로 감싸지 않고 사용해야 한다.
• redirect()는 절대 URL을 사용할 수 있기 때문에 외부 사이트로 리다이렉션 하는 것도 가능하다.
• 렌더링 중 리다이렉션을 하려면 next.config.js 또는 미들웨어를 사용하면 된다.