1. 개요

경로 파라미터는 URL 경로의 일부로 포함되어 있으며, 리소스를 고유하게 식별한다. 경로 파라미터는 보통 URL의 슬래시(/)를 통해 구분되며, RESTful API 설계에서 많이 사용

2. 특징

https://example.com/users/123

• 여기서 123은 users 리소스의 특정 사용자 ID를 나타내는 경로 파라미터
• /users/:id 형태로 설정할 수 있으며, 이때 id는 동적으로 변하는 부분을 의미

3. Next.js app router에서 사용

먼저 사용하고자하는 폴더에 [id] 라는 하위 폴더를 만들고 id 폴더 내부에 page이름의 파일을 만든다.

parentfolder/[id]/page.tsx

export default async function Page({params} : {params:Promise<{id:string}>;}) {
    const { id } = await params;

    return (
        <div>book/[id] page : {id}</div>
    )
}

• async : await를 사용하게 하기 위해 설정
• {params} : 함수의 매개변수로 받는 객체이며, 이 객체는 페이지의 경로와 관련된 파라미터를 포함
• { params: Promise<{ id: string }> } : 타입스크립트의 구조 분해 할당 구문을 사용하여 함수의 인자로 전달된 객체에서 추출된 값
• const { id } = await params; :
  비동기 처리를 위해 await 키워드를 사용하여 params에서 id를 추출
  await는 params가 Promise로 정의되어 있기 때문에, params가 해결된 값을 받아서 { id }에 할당

중첩 url 파라미터

• 2개 일때
  [id].tsx 이름을 [...id]로 캐치올 세그먼트로 설정
  단 url 파라미터가 존재하지 않는 페이지는 대응이 되지않는다.

이때 [[...id]] 이렇게 옵셔널 캐치올 세그먼트로 대괄호를 두번 치면 가능