Next.js

Catch-all 세그먼트 사용

이전 절에서 동적 라우트 [slug]가 단일 파라미터 처리에 유용하다는 점을 확인했습니다. 하지만 실무에서는 URL 길이가 가변적이거나 중첩된 여러 경로를 한 페이지에서 처리해야 하는 경우가 자주 생깁니다.

가변 경로의 깊이, 선택적 세그먼트, params 배열 처리를 기준으로 Catch-all 라우트를 설계합니다.

1

Catch-all 세그먼트 개념

Catch-all 세그먼트는 폴더 이름을 세 개의 점(...)과 파라미터 이름을 함께 대괄호([])로 감싸서 정의합니다.

Catch-all 세그먼트
2

필수 Catch-all 세그먼트 구현하기

필수 Catch-all 세그먼트 [...slug]는 블로그에서 카테고리와 게시물 제목 외에 임의 깊이의 서브 카테고리를 하나의 배열 파라미터로 받아야 할 때 사용합니다.

모두 잡아채는(Catch-all)
3

선택적 Catch-all 세그먼트 구현하기

`/docs` 자체와 `/docs/a/b`를 모두 같은 route에서 처리해야 할 때는 선택적 catch-all인 `[[...slug]]`를 사용합니다.

세 개의 점(...)과 파라미터 이름