Next.js 라우팅: next/router vs next/navigation, 무슨 차이일까?

안녕하세요 :)

 

Next.js에서 라우팅을 처리할 때, 두 가지 주요 라이브러리를 사용할 수 있습니다. next/router와 next/navigation인데요, 이 둘은 다른 방식의 라우팅을 처리하고, 사용하는 방식과 상황이 다릅니다.

https://javascript.plainenglish.io/next-jss-new-app-vs-pages-router-a-detailed-comparison-46f846963af5

 

오늘은 이 두 가지 라이브러리에 대해 알아보고 최신 트랜드는 무엇인가에 대해 알아보도록 하겠습니다. 먼저 next/router를 먼저 보실까요?

 

next/router

next/router는 Next.js의 전통적인 라우팅 방식입니다. 페이지 기반 라우팅을 주로 사용하던 시절부터 제공되어 왔으며, 클래식 페이지 디렉터리 구조와 함께 작동합니다.

 

예제 코드는 다음과 같습니다.

import { useRouter } from 'next/router';

const Example = () => {
  const router = useRouter();

  const goToHome = () => {
    router.push('/');
  };

  return <button onClick={goToHome}>Go to Home</button>;
};

export default Example;

 

next/router의 주요 특징으로는

1. React의 useRouter 훅을 사용해 라우팅 관련 기능에 접근할 수 있다.
2. pages 디렉토리와 잘 통합된다.
3. 주로 클라이언트 측 네비게이션을 다룰 때 사용된다.

이며, 주로 사용되는 메서드는 

• router.psuh('/경로') : 경로 이동 (뒤로가기 O)
• router.replace('경로') : 브라우저 히스토리 스택에 새로운 경로를 대체 (뒤로가기 X)
• router.back() : 이전 페이지로 이동
• router.query : 동적 라우팅에서 쿼리 매개변수 접근

등이 있습니다.  

 

next/router는 언제 사용할까요?

• Next.js 12 이하 버전
• 기존 프로젝트에서 기존 페이지 디렉토리 기반 앱을 사용 중일 때 사용

 

next/navigation

next/navigation은 Next.js 13에서 도입된 App Router 시스템의 핵심이 되는 라이브러리입니다. 이건 새로운 App 디렉토리 기반 라우팅과 연동되어, 클라이언트 및 서버 측 라우팅 모두를 현대적인 방식으로 처리할 수 있게 해줍니다.

 

예제 코드를 보겠습니다.

'use client';

import { useRouter } from 'next/navigation';

const Example = () => {
  const router = useRouter();

  const goToHome = () => {
    router.push('/');
  };

  return <button onClick={goToHome}>Go to Home</button>;
};

export default Example;

코드를 작성할 때는 별 다른 차이가 없는 거 같지 않나요? 특징을 보겠습니다.

 

next/navigation의 특징으로는,

1. React Server Components와 통합이 잘 됨.
2. 페이지가 아닌 파일 기반 컴포넌트 라우팅 지원
3. 서버 컴포넌트에서도 작동하도록 설계되어 있음.
4. 더 빠른 라우팅을 제공함.

사용하는 주요 메서드는 next/router와 별 차이가 없습니다.

 

언제 사용할까요?

• Next.js 13 이상 버전에서 App 디렉토리를 사용할 때,
• 서버와 클라이언트 컴포넌트 조합을 적극 활용하려고 할 때 사용합니다.

 

그럼 두 라이브러리에 명확한 차이가 뭔지 표로 한 눈에 보도록 하겠습니다.

 

비교하기

next/router와 next/navigation의 차이는 '어떤 환경과 구조에서 사용하는가'에 달려있습니다.

항목	next/router	next/navigation
지원 구조	Pages 디렉토리	App 디렉토리
도입 시기	Next.js 초기부터	Next.js 13 이상
라우팅 방식	클라이언트 측 라우팅 중심	클라이언트 및 서버 측 라우팅 모두 지원
React 서버 컴포넌트	지원 안 됨	완전 통합 지원
API 접근 방식	useRouter, 객체 기반	useRouter, 함수 기반
성능 최적화	기본적인 클라이언트 라우팅만 최적화	Server 컴포넌트와의 통합으로 더 빠른 렌더링 지원

 

 

최신 트랜드

Next.js는 App 디렉토리를 사용한 라우팅으로 점점 더 이동하고 있으며, next/navigation이 앞으로의 표준이 될 가능성이 높다고 생각합니다. 따라서 앞으로는 App 디렉토리 및 next/navigation 기반으로 설계하는 것이 장기적으로 유리하지 않을까...싶네용

https://phrase.com/blog/posts/next-js-app-router-localization-next-intl/

 

끝내는 말

오늘은 이렇게 Next.js의 두 라우팅 라이브러리에 대해 알아보았습니다. 저번에 router 글을 올렸을 때는 코드에 next/router로 작성을 하였는데, 앞으로 쓸 글에 라우터가 들어간다면 next/navigation으로 쓰려고 합니다!

 

읽어주셔서 감사합니다 :)