Next.js

Catch-all 세그먼트 사용

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

Catch-all 세그먼트와 모두 잡아채는를 중심으로 Catch-all 세그먼트 사용의 판단 흐름을 읽습니다.

1

Catch-all 세그먼트란?

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

Catch-all 세그먼트
2

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

필수 Catch-all 세그먼트 [...slug]는 블로그에서 카테고리와 게시물 제목 외에, 임의의 깊이를 가진 서브 카테고리를 처리하고 싶을 때 유용합니다.

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

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

이제 /docs 경로 자체도 매칭시키고 싶을 때 사용하는 [[...slug]]를 구현해 보겠습니다.

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