Next.js 14 시작하기 #3 Catch-all Segments

강의 9번

Catch-all Segment

• URL 경로에서 정해진 패턴이나 규칙에 상관 없이 모든 세그먼트를 포괄적으로 매칭할 수 있는 경로 매개변수
• Next.js에서는 [...slug] 로 표현함, slug는 자바스크립트의 common convention임
  
  위의 이미지를 보며 설명해보자면, localhost:3000/docs 경로에 [...slug]라는 매개변수 폴더를 만들었고 우측 코드를 보면 params.slug.length에 따라 다른 출력값이 나오도록 할 수 있다.
  예를 들어 docs/1/2 경로로 접근하면
  
  위의 사진처럼 출력이 되는데 이는 params.slug.length가 2이기 때문에 if 조건문에 의해 결정된 것이다
  slug의 길이는 제한되어있지 않고 예를 들어 docs/1/2/3/4/5/6/7/8/9 경로로 접근하면 params.slug.length는 9가 된다. params.slug는 값이 배열로 들어오므로 index 별로 각 매개변수에 접근할 수 있다.
  
  catch-all segment 경로 정리