프론트엔드 개발 · 중급
App Router의 Route Handlers(`app/api/route.ts`)에서 동적 라우팅 파라미터(예: `[id]`)에 접근하려면 함수의 매개변수를 어떻게 정의해야 하나요?
힌트 · 함수의 두 번째 매개변수로 context 객체를 받아 `context.params.id` 형태로 접근합니다. (예: `export async function GET(request, { params })`)
paramsNextRequestcontextdynamic route segmentstype definition
모범답안
App Router에서 동적 라우팅 파라미터에 접근하려면 Route Handler 함수의 두 번째 매개변수를 활용해야 합니다.
함수를 정의할 때 request와 함께 context 객체를 받도록 선언하고, context 객체 안의 params 속성을 통해 동적 라우트 세그먼트에 접근할 수 있습니다. 예를 들어 app/api/[id]/route.ts에서 id 값에 접근하려면 export async function GET(request: NextRequest, { params }: { params: { id: string } }) 와 같이 함수를 정의하고, params.id를 사용하면 됩니다.
타입스크립트를 사용한다면 params의 타입을 명시적으로 정의하여 타입 안정성을 확보하는 것이 좋습니다.
읽었다면, 이제 직접 답해볼 차례예요
패스잇 앱에서 이 질문에 말로 답하면 AI가 꼬리질문까지 이어가며 1:1 코칭합니다.
함께 보는 Next.js 면접 질문
- App Router에서 특정 경로의 동적 렌더링 여부를 파일 레벨에서 강제하기 위해 export하는 Route Segment Config 변수와 값은 무엇인가요?
- Next.js Middleware(`middleware.ts`)에서 특정 경로들만 미들웨어를 거치도록 적용 대상을 필터링하는 설정 객체의 속성 이름은 무엇인가요?
- Middleware 파일 내부에서 조건부로 사용자를 로그인 페이지로 리다이렉트 시키려면 어떤 클래스의 메서드를 반환해야 하나요?
- RSC Payload(React Server Component Payload) 내부 구조는 대략적으로 어떤 형태로 구성되어 있나요?
- React 렌더링 파이프라인에서 RSC(React Server Component)가 생성한 Payload를 클라이언트(브라우저)가 받아 기존 DOM과 병합하는 과정(Reconciliation)을 담당하는 React API는 무엇인가요?
- Next.js 14의 Partial Prerendering(PPR)을 사용할 때, 특정 컴포넌트가 동적(Dynamic) 렌더링되도록 트리거하는 가장 보편적인 React API는 무엇인가요?