Next.js 학습v16.3.2
Interactive Demos

실습 예제

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

총 예제 수
245개
구현 완료
245
실행 환경
독립 인터랙티브 샌드박스
검색 결과 79개 (전체 245개 중)(페이지 1 / 4)
검색 결과 79개 예제가 표시되었습니다. 총 4페이지 중 1페이지입니다.
Guides
학습 미완료
server-actions/basic

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

Server Actions
예제 열기
Guides
학습 미완료
guides/streaming-nested

중첩 Suspense 점진적 청크 스트리밍

Streaming
예제 열기
Guides
학습 미완료
guides/server-actions-advanced

Server Action 폼 검증과 useActionState 할인 상태

Server Actions
예제 열기
Guides
학습 미완료
guides/swr-polling

SWR 실시간 배송 조회 자동 폴링 & mutate() 갱신

SWR
예제 열기
Guides
학습 미완료
guides/lazy-loading-chart

next/dynamic 지연 로딩 & 클라이언트 번들 최적화

Lazy Loading
예제 열기
Guides
학습 미완료
guides/auth-session

Next.js 인증 & 세션 기반 역할 분기 (RBAC)

Authentication
예제 열기
Guides
학습 미완료
guides/rendering-philosophy/server-vs-client

서버 렌더링 vs 클라이언트 렌더링 수명주기 대조

Rendering Philosophy
예제 열기
Guides
학습 미완료
guides/server-and-client-boundary/children-slot

Server and Client Component 합성과 children 슬롯 주입

Server and Client Boundary
예제 열기
Guides
학습 미완료
guides/how-revalidation-works/swr-flow

Stale-While-Revalidate 백그라운드 갱신 흐름

How Revalidation Works
예제 열기
Guides
학습 미완료
guides/caching-legacy/fetch-cache

Next.js 14 레거시 fetch cache vs Route Segment revalidate

Caching (Previous Model)
예제 열기
Guides
학습 미완료
guides/streaming/chunk-loading

Suspense 스트리밍과 로딩 청크 순차 처리

Streaming
예제 열기
Guides
학습 미완료
guides/isr/time-isr-60s

60초 주기 상품 상세 증분 정적 재생성 (ISR)

ISR
예제 열기
Guides
학습 미완료
guides/isr-cache-components/cache-life-hours

Next.js 16 cacheLife('hours') 프로필 기반 수명 제어

ISR with Cache Components
예제 열기
Guides
학습 미완료
guides/migrating-cache-components/unstable-to-use-cache

unstable_cache에서 Next.js 16 use cache로 마이그레이션

Migrating to Cache Components
예제 열기
Guides
학습 미완료
guides/adopting-partial-prefetching/hover-shell

링크 호버 시 정적 셸 표시 (Partial Prefetching 예시)

Adopting Partial Prefetching
예제 열기
Guides
학습 미완료
guides/auth-cache-components/static-layout-session-context

정적 상품 레이아웃과 UserContext 기반 세션 스트리밍

Authentication with Cache Components
예제 열기
Guides
학습 미완료
guides/forms/use-action-state-errors

useActionState 필드 에러 표시 및 유효성 검증

Forms
예제 열기
Guides
학습 미완료
guides/forms/use-form-status-spinner

useFormStatus pending 스피너 및 버튼 비활성화

Forms
예제 열기
Guides
학습 미완료
guides/server-actions/start-transition

startTransition을 통한 프로그래밍 방식 Server Action 호출

Server Actions
예제 열기
Guides
학습 미완료
guides/swr/mutation-optimistic

SWR mutate()를 활용한 낙관적 장바구니 갱신

SWR
예제 열기
Guides
학습 미완료
guides/tanstack-query/infinite-scroll

TanStack Query useInfiniteQuery 상품 목록 무한 스크롤

TanStack Query
예제 열기
Guides
학습 미완료
guides/redirecting/order-complete

Server Action 내 redirect()를 통한 주문 완료 화면 이동

Redirecting
예제 열기
Guides
학습 미완료
guides/draft-mode/preview-toggle

미공개 특가 상품 Draft Mode 토글 및 Bypass 쿠키

Draft Mode
예제 열기
Guides
학습 미완료
guides/prefetching/viewport-vs-hover

뷰포트 진입 시 자동 prefetch와 prefetch={false} 비교

Prefetching
예제 열기