1. 개념 요약

Next.js에서 Page Router는 pages 디렉토리를 기반으로 동작한다. 이 중 Catch-All Segment는 URL 경로의 여러 부분을 하나의 배열로 받아 처리할 수 있게 해주는 라우팅 기법이다.

2. 배경 지식

• Next.js는 파일 기반 라우팅 시스템을 사용한다.
• URL 경로는 각 디렉토리 또는 파일 이름과 매핑된다.
• 동적 라우팅은 [param].tsx 형태로 작성하며,
  • 그 중 Catch-All 라우팅은 [...param].tsx
  • Optional Catch-All 라우팅은 [[...param]].tsx 로 구성한다.

3. 상세 설명

1. Catch-All Segment

• 파일명: pages/products/[...id].tsx

• URL 예시:

  <https://example.com/products**/shoes/nike**>
  

• 경로 구조:

  • /products 아래의 하위 경로 전체를 id라는 배열로 받을 수 있음

  • useRouter().query.id의 결과는:

    ['shoes', 'nike']
    

📌 특징:

• [...id]는 경로의 여러 segment를 모두 배열로 처리
• 유효한 경로가 없는 경우, Next.js는 기본적으로 404 처리

2. Optional Catch-All Segment