Next.js 학습v16.3.2
Interactive Demos

실습 예제

Next.js App Router의 핵심 기능을 실행 가능한 예제로 직접 확인해 보세요.

총 예제 수
241개
구현 완료
25
실행 환경
독립 인터랙티브 샌드박스
총 241개의 예제(페이지 1 / 11)
총 241개의 예제 중 1페이지입니다.
Guides준비 중
server-actions/basic

Server Actions 기본 폼 처리 및 상태 변경

Server Actions
예제 열기
Getting Started
학습 미완료
caching/basic

use cache 기본 동작 및 revalidateTag 무효화

Caching
예제 열기
Getting Started
학습 미완료
layouts-and-pages/nested-layouts

쇼핑몰 GNB 및 사이드바 중첩 레이아웃 (Partial Rendering)

Layouts and Pages
예제 열기
Getting Started
학습 미완료
layouts-and-pages/template-lifecycle

template.tsx 생명주기 및 인스턴스 재생성

Layouts and Pages
예제 열기
Getting Started
학습 미완료
layouts-and-pages/route-groups-layouts

Route Groups를 활용한 다중 루트 레이아웃 분리

Layouts and Pages
예제 열기
Getting Started
학습 미완료
linking-and-navigating/soft-navigation

Link와 a의 소프트 내비게이션 및 스크롤 제어

Linking and Navigating
예제 열기
Getting Started
학습 미완료
linking-and-navigating/router-prefetch

useRouter를 이용한 프로그래밍 방식 내비게이션과 prefetch 최적화

Linking and Navigating
예제 열기
Getting Started
학습 미완료
server-client-components/composition

Server & Client Components 합성 및 경계 분리

Server and Client Components
예제 열기
Getting Started
학습 미완료
server-client-components/serialization

Props 직렬화(Serialization) 및 전달 경계 검증

Server and Client Components
예제 열기
Getting Started
학습 미완료
fetching-data/parallel-fetching

Promise.all 병렬 데이터 페칭과 직렬 Waterfall 비교

Fetching Data
예제 열기
Getting Started
학습 미완료
fetching-data/use-promise-streaming

React 19 use(Promise)와 Suspense 스트리밍

Fetching Data
예제 열기
Getting Started
학습 미완료
mutating-data/server-action-revalidate

Server Action 데이터 변경 및 revalidatePath 동기화

Mutating Data
예제 열기
Getting Started
학습 미완료
mutating-data/optimistic-cart

React 19 useOptimistic 낙관적 장바구니 UI

Mutating Data
예제 열기
Getting Started
학습 미완료
revalidating/time-based-isr

cacheLife 시간 기반 캐시 수명과 SWR

Revalidating
예제 열기
Getting Started
학습 미완료
revalidating/tag-vs-path

revalidateTag와 revalidatePath의 무효화 범위 비교

Revalidating
예제 열기
Getting Started
학습 미완료
error-handling/segment-error

error.tsx 세그먼트 오류 경계 격리 및 복구

Error Handling
예제 열기
Getting Started
학습 미완료
error-handling/global-error

예상된 에러 vs 예외 vs global-error 계층 처리

Error Handling
예제 열기
Getting Started
학습 미완료
css/tailwind-v4

Tailwind CSS v4 유틸리티 클래스 & 반응형 스타일

CSS
예제 열기
Getting Started
학습 미완료
css/css-modules

CSS Modules 스코프 격리 및 해시 클래스 충돌 방지

CSS
예제 열기
Getting Started
학습 미완료
images/image-optimization

next/image 자동 WebP 변환 및 CLS 방지 최적화

Image Optimization
예제 열기
Getting Started
학습 미완료
fonts/font-optimization

next/font 자동 셀프호스팅 및 Zero CLS 폰트 로딩

Font Optimization
예제 열기
Getting Started
학습 미완료
metadata-and-og-images/static-and-dynamic-metadata

generateMetadata 동적 메타데이터 & 소셜 공유 미리보기

Metadata and OG images
예제 열기
Getting Started
학습 미완료
metadata-and-og-images/opengraph-image

opengraph-image.tsx 동적 OG 이미지 생성 (ImageResponse)

Metadata and OG images
예제 열기
Getting Started
학습 미완료
route-handlers/rest-api-crud

REST API Route Handler (GET, POST, PATCH, DELETE)

Route Handlers
예제 열기