nextjs
CHAPTER 8 / 34
읽기 약 2분
SYNTAX
Dynamic Route 해부: [slug] 동적 라우팅
핵심 개념
[slug] 폴더로 동적 라우트를 생성합니다. params.slug로 URL 파라미터를 받습니다. generateStaticParams로 정적 생성이 가능합니다.
코드 분석
DYNAMIC ROUTE
app/units/[id]/page.tsx
→ /units/t800, /units/t1000 ...
export default function UnitPage({
params
}: {
params: { id: string }
}) {
return <div>Unit: {params.id}</div>
}
// 정적 생성
export function generateStaticParams() {
return [
{ id: 't800' },
{ id: 't1000' },
]
}AI 프롬프트
🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트
Claude
무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6
이 Next.js 'Dynamic Route' 코드에서 서버/클라이언트 경계·use client 누락·캐시 무효화 버그를 찾아서 수정해줘.
ChatGPT
무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro
'Dynamic Route'를 활용한 실전 페이지를 App Router + TypeScript + Server Actions로 만들어줘.
Gemini
무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro
이 Next.js 'Dynamic Route' 사용 패턴이 빌드 크기와 LCP/INP/CLS에 미치는 영향을 분석하고 최적화 방안을 알려줘.
Grok
무료: Grok 4.1 / SuperGrok $30/mo
Next.js 'Dynamic Route' vs Remix/Astro/SvelteKit의 동일 기능 구현을 2026년 기준으로 솔직하게 비교해줘.
⭐ 이것만 기억하세요
Dynamic Route 해부: [slug] 동적 라우팅은 이 3가지만 확실히 잡으세요
1.블로그 글마다 별도 page.tsx를 만들면 글 1,000개에 파일 1,000개가 필요합니다
2.[slug] 폴더명으로 동적 세그먼트를 정의하고, params.slug로 URL 값을 받아서 하나의 템플릿으로 무한한 페이지를 생성합니다
3.다음 챕터에서 페이지별 SEO 메타 태그를 설정하는 metadata API를 배웁니다
공유하기
진행도 8 / 34