[Next.js] 파일 기반 라우팅, 동적 라우팅, useRouter 을 알아보자

 

Next.js 파일 기반 라우팅과 동적 라우팅을 알아보자 👀

 

React에서 주로 사용되는 라우팅 라이브러리는 코드 기반 라우팅을 제공하고 있습니다. 이 방식은 라우팅을 컴포넌트 내에서 코드로 관리하죠. 일반적으로 URL 경로에 대한 라우팅 정보와 해당 경로에 렌더링할 컴포넌트를 매핑하는 방식으로 사용하고 있죠.

 

반면에, Next.js에서는 조금 다르게 라우팅을 합니다. 간단히 말하면, 프로젝트 디렉토리 내의 페이지 파일의 경로와 URL 경로가 일치하는 것입니다. 오늘은 이 파일 기반 라우팅에 대해서 알아볼게요 🧐

 

 

---

 

🍊 파일 기반 라우팅이란?

Next.js 에서는 파일을 기반으로 라우팅됩니다.

 

🙋🏻‍♀️ 파일 기반 라우팅? 이게 무슨 소린가요

 

🧑🏻‍🏫 파일 이름이 곧 url 경로가 된다는 소리입니다!

 

 

📍 페이지를 하나 만들어보자

예를 들어, about 이라는 페이지를 만들어 봅시다.

 📁 page/about.js

page 폴더 내부에 about.js라는 파일을 생성합니다.

🔗 /about

 그러면 about 페이지가 나타나는 경로는 자동적으로 /about 이 됩니다.

 

이를 보고 파일 기반 라우팅이라고 하는 것입니당.

 

몇가지 예를 더 살펴볼게요.

 

📍 Home 페이지

📁 page/index.js

🔗 /

index.js 는 기본적으로 해당 폴더의 / 루트 경로로 설정됩니다.

 

📍 Product 페이지

📁 page/product/index.js

🔗 /product

/product로 들어가면 index.js에 작성한 페이지가 보입니다.

 

📍 Product 상세 페이지

📁 page/product/[id].js

🔗 /product/abc

동적 경로도 라우팅할 수 있습니다. [원하는 id].js 형태로 파일명을 설정하면 아무 값(ex: abc)을 입력해도 해당 페이지로 이동합니다.

 

 

 

---

 

🍊 현재 경로 확인하기 : useRouter()

next에서 제공하는 useRouter() 훅을 이용해 현재 경로를 확인할 수 있습니다.

 

📍 useRouter() -> pathname

pathname: 현재 경로를 나타내는 useRouter 프로퍼티

📍 useRouter() -> query

query: 입력한 하위 경로를 나타내는 useRouter 프로퍼티

 

📍 useRouter() 사용법

📁 page/product/[id].js

import { useRouter } from 'next/router';

function ProductDetail() {
	const router = useRouter();
    console.log(router.pathname); // 현재 경로 출력
    console.log(router.query); // [입력한 id] 출력
    
    return(
    	<div>
        	<h1>About Page</h1>
        </div>
    );
}

export default ProductDetail;

/product/abc 경로로 들어갔을 때 콘솔을 확인해보면 아래처럼 뜨는 것을 볼 수 있습니다.

 

📌 pathname : url 경로 출력

📌 query: 동적 라우팅 주소 출력

 

 

 

---

 

🍊 요약: Next.js는 파일 기반 라우팅을 사용한다

Next.js에서는 파일 기반 라우팅을 지원하고 동적 라우팅 또한 가능합니다. useRouter() 라는 훅을 통해 현재 경로와 동적으로 생성된 경로를 확인할 수 있습니다.

 

 

다음 포스팅에서는 중첩 동적 라우팅과 Link 컴포넌트를 이용한 내비게이팅, 그리고 동적 라우트로 내비게이팅하는 다양한 방법에 대해서 알아볼게요 👀