slug 동적 라우트와 catch-all 라우트 차이 이해하기

Next.js의 동적 라우트 차이점 이해하기

Next.js에서 동적 라우트를 구현할 때 @slug와 [[...filter]]는 다르게 동작합니다.

1. @slug 동적 라우트

기본 URL인 /archive는 포함하지 않고, 파라미터가 있는 경우만 처리합니다:

// 라우팅 동작
/archive          ❌ 포함 안됨
/archive/2023     ✅ 포함
/archive/2024     ✅ 포함

2. [[...filter]] Optional Catch-all 라우트

기본 URL을 포함한 모든 하위 경로를 처리합니다:

// 라우팅 동작
/archive          ✅ 포함됨 (params.filter는 undefined)
/archive/2023     ✅ 포함 (params.filter는 ['2023'])
/archive/2023/12  ✅ 포함 (params.filter는 ['2023', '12'])

폴더 구조 예시

app/
  archive/
    page.js            // /archive 처리
    @archive/
      [year]/          // /archive/2023 처리
        page.jsx
      layout.jsx

이렇게 구성하면 기본 경로와 동적 경로를 깔끔하게 분리할 수 있습니다.