[Routing] 폴더 구조로 라우팅을 끝낸다고?

Next.js 라우팅 

Next.js는 React 기반의 프레임워크로, 복잡한 라우팅을 간편하게 처리할 수 있는 파일 기반 라우팅 시스템을 제공합니다. 특히 Next.js 13부터는 기존의 Pages Router 외에 새로운 방식인 App Router가 도입되며, 더 유연하고 강력한 기능들이 추가되었습니다.
이 글에서는 Next.js 라우팅의 기본 개념부터, 최신 App Router 방식까지 한 번에 정리해 드립니다.

 

---

1.  Next.js 라우팅이란?

Next.js에서는 파일 이름과 디렉토리 구조가 곧 URL 경로가 됩니다. React Router처럼 수동으로 라우팅을 정의할 필요 없이, 구조에 맞게 폴더와 파일을 배치하기만 하면 됩니다.

/pages
  ├── index.js       → /
  ├── about.js       → /about
  └── blog
       └── [id].js   → /blog/:id

• 위와 같은 파일 구조를 가진다면, 자동으로 URL이 매핑됩니다.

 

---

2.  Pages Router vs App Router 비교

항목	Pages Router	App Router (Next.js 13+)
디렉토리	/pages	/app
라우팅 방식	파일 기반, React Component 반환	파일 기반, React Server Component 지원
데이터 패칭 방식	getStaticProps, getServerSideProps	fetch + useEffect 또는 use (서버 컴포넌트)
레이아웃 구성	각 페이지 개별 구성	중첩 레이아웃 (layout.js) 지원
동적 라우팅	[id].js	[id]/page.js
지원 여부	유지보수됨	최신 기능 중심, 점차 주력 방식으로 전환

 

---

3.  App Router 구조 예시

Next.js 13 이후 도입된 App Router는 새로운 /app 디렉토리에서 작동합니다.
기본 구조는 다음과 같습니다.

/app
  ├── layout.js        ← 전체 레이아웃 정의
  ├── page.js          ← 루트 페이지 ("/")
  ├── about
  │    └── page.js     ← "/about"
  └── blog
       ├── layout.js   ← 블로그 섹션 레이아웃
       ├── page.js     ← "/blog"
       └── [id]
           └── page.js ← "/blog/:id"

• page.js 는 실제 라우트의 내용을 렌더링하며, layout.js 는 중첩 가능하고 여러 페이지에서 공유됩니다.

 

---

4.  예제 - App Router로 블로그 포스트 라우팅

// app/blog/[id]/page.js

export default function BlogPost({ params }) {
  const { id } = params;

  return (
    <div>
      <h1>블로그 글: {id}</h1>
      <p>이곳에 글 내용을 렌더링합니다.</p>
    </div>
  );
}

• App Router에서는 params 를 직접 받아 사용할 수 있어 매우 직관적입니다.

 

---

5.  동적 라우팅과 Catch-all

Next.js는 동적 라우팅을 위한 특별한 문법을 제공합니다.

패턴	설명	경로 예시
[id]	단일 동적 세그먼트	/blog/1
[...slug]	Catch-all (0개 이상)	/docs/a/b/c
[[...slug]]	선택적 Catch-all (0개도 가능)	/docs, /docs/a

 

---

6.  마무리

• Next.js는 파일 기반 라우팅 시스템을 제공해 URL 구조가 명확하고 유지보수가 쉽습니다.
• Pages Router는 기존 방식이며, App Router는 최신 Next.js 기능을 반영한 새로운 라우팅 시스템입니다.
• App Router에서는 layout.js, page.js, 동적 라우팅, 서버 컴포넌트 등이 핵심 요소입니다.
• 새 프로젝트나 최신 기능을 활용하고 싶다면 App Router 사용을 권장합니다.

 

---