Next.js 학습v16.3.2
App Router 문서와 실습 예제
문서학습 문서예제Live시각화
공식 문서
실습 예제 목차
실습 예제 목차
준비 중Next.js App Router 학습
시작하기 (Getting Started)
18
준비 중Installation
준비 중Project Structure
예제(3)Layouts and Pages
예제(2)Linking and Navigating
예제(2)Server and Client Components
예제(2)Fetching Data
예제(2)Mutating Data
예제Caching
예제(2)Revalidating
예제(2)Error Handling
예제(2)CSS
예제Image Optimization
예제Font Optimization
예제(2)Metadata and OG images
예제(2)Route Handlers
예제Proxy
준비 중Deploying
준비 중Upgrading
가이드 (Guides)
64
핵심 모델 (렌더링·캐싱의 기본 개념)
예제(2)Rendering Philosophy
예제(2)Server and Client Boundary
예제(2)How Revalidation Works
예제(2)Caching (Previous Model)
예제(2)Streaming
캐싱·revalidation 심화
예제(2)ISR
예제(2)ISR with Cache Components
예제(2)Migrating to Cache Components
예제(2)Adopting Partial Prefetching
예제(2)Authentication with Cache Components
준비 중CDN Caching
준비 중CI Build Caching
데이터·폼
예제(2)Forms
예제(3)Server Actions
Client-side data fetching
2
예제(2)Redirecting
예제(2)Draft Mode
내비게이션·체감 성능
예제(2)Prefetching
예제Optimizing prefetching
예제(2)Instant navigation
예제(2)Lazy Loading
예제(2)Preserving UI state
예제Preventing Flash Before Hydration
예제View transitions
스타일링
예제(2)CSS-in-JS
준비 중Sass
준비 중Tailwind CSS v3
인증·보안
예제(3)Authentication
예제(2)Data Security
예제Content Security Policy
예제(2)Environment Variables
메타데이터·인터랙션 확장
예제JSON-LD
예제(3)Interactive apps
예제(2)Scripts
예제(2)MDX
예제(2)Third Party Libraries
앱 아키텍처 패턴
예제(2)Backend for Frontend
준비 중SPAs
예제PWAs
준비 중Offline support
예제(2)Internationalization
예제(2)Multi-tenant
예제Multi-zones
테스트·디버깅
Testing
4
준비 중Debugging
준비 중Development Environment
준비 중Memory Usage
예제Instrumentation
예제OpenTelemetry
빌드·번들링
준비 중Building
준비 중Package Bundling
준비 중Custom Server
배포·운영
준비 중Production
준비 중Self-Hosting
준비 중Deploying to Platforms
예제(2)Static Exports
예제Public Pages
준비 중PPR Platform Guide
분석·기타
예제Analytics
예제Videos
AI 도구
준비 중AI Coding Agents
준비 중Next.js MCP Server
마이그레이션·업그레이드
Migrating
3
Upgrading
4
API 레퍼런스 (API Reference)
12
File-system conventions
33
Components
5
Functions
41
Directives
5
Configuration
3
CLI
2
Adapters
12
예제(2)Edge Runtime
준비 중Turbopack
Metadata Files
5
Route Segment Config
6
next.config.js
69
준비 중용어집 (Glossary)
아키텍처 (Architecture)
4
예제(2)Accessibility
예제Fast Refresh
예제Next.js Compiler
준비 중Supported Browsers
/문서:Dynamic Segments
이전 예제2 / 4다음 예제

[...slug] Catch-all 다이나믹 세그먼트

이 문서의 예제:#1[id] 단일 다이나믹 세그먼트#2[...slug] Catch-all 다이나믹 세그먼트#3[[...slug]] Optional Catch-all 다이나믹 세그먼트#4[slug] 세그먼트의 정적·동적 렌더링 판정 (generateStaticParams 유무)
새 탭
데모 앱을 로드하는 중...
Next.js 학습App Router 공식 문서 기반 한국어 가이드 & 실습 예제
Next.js v16.3.2GitHub 저장소
© 2026 Next.js Study Lab. Open Source Curriculum.Next.js is a trademark of Vercel, Inc.