상품 상세 페이지

Next.js app-router 의 동적 라우트로 상품 상세 화면을 완성하는 문제입니다. /products/[id] 로 들어가면 그 상품의 이름·가격·설명을 보여 줍니다. 데이터는 정적 상품 모듈(lib/products) 3개를 그대로 쓰며, 표시 로직은 app/products/[id]/page.tsx 에 둡니다.

Next.js app-router 의 동적 라우트는 주소의 한 조각([id])을 받아 페이지를 그립니다. 이 문제는 /products/[id] 상세 페이지가 주소에서 [id] 를 읽어 그 상품의 이름·가격·설명을 그리는 것을 다룹니다. 카탈로그 상품들에서 페이지가 실제로 제대로 렌더되는지 검증하는 습관이 중요합니다.

Next.js app-router 의 동적 라우트 [id] 는 어떻게 동작하나요?

주소의 한 조각이 매개변수로 페이지에 전달됩니다. /products/[id] 페이지는 그 [id] 값을 받아 어떤 상품을 보여 줄지 정합니다.

상세 페이지는 어떻게 검증하나요?

npm test 로 @testing-library/react 테스트를 돌리고, npm run dev 로 띄운 /products/1 등에서 이름·가격·설명이 화면에 보이는지 직접 확인하세요.

상품 데이터는 어디서 오나요?

lib/products.ts 의 정적 카탈로그(3개)에서 옵니다. 이 모듈은 완성돼 있어 고칠 필요가 없고, DB·API 호출은 없습니다.