Next.js 학습v16.3.2
Interactive Demos

실습 예제

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

총 예제 수
245개
구현 완료
245
실행 환경
독립 인터랙티브 샌드박스
검색 결과 137개 (전체 245개 중)(페이지 1 / 6)
검색 결과 137개 예제가 표시되었습니다. 총 6페이지 중 1페이지입니다.
API Reference
학습 미완료
file-conventions/parallel-routes

병렬 라우트의 이동과 새로고침 비교

Parallel Routes
예제 열기
API Reference
학습 미완료
file-conventions/intercepting-routes

Intercepting Routes ((..)segment) 라우트 인터셉트

Intercepting Routes
예제 열기
API Reference
학습 미완료
components/form-component

Form으로 검색하고 서버 결과 확인하기

Form Component
예제 열기
API Reference
학습 미완료
file-conventions/layout/root-and-nested

루트 레이아웃(Root Layout) 및 카테고리 중첩 레이아웃

layout.js
예제 열기
API Reference
학습 미완료
file-conventions/loading/skeleton-boundary

loading.tsx 스켈레톤 UI 자동 래핑 및 Suspense

loading.js
예제 열기
API Reference
학습 미완료
file-conventions/not-found/missing-product-404

not-found.tsx 및 notFound() 프로그래밍 404 트리거

not-found.js
예제 열기
API Reference
학습 미완료
components/image/responsive-sizes

next/image responsive fill & sizes 속성 반응형 로딩

Image Component
예제 열기
API Reference
학습 미완료
file-conventions/layout/state-preservation

클라이언트 상태 보존 중첩 레이아웃

layout.js
예제 열기
API Reference
학습 미완료
file-conventions/layout/dynamic-category-layout

[category]/layout.tsx 동적 카테고리 레이아웃

layout.js
예제 열기
API Reference
학습 미완료
file-conventions/page/static-and-dynamic

정적(Static) vs 동적(Dynamic) page.tsx 렌더링

page.js
예제 열기
API Reference
학습 미완료
file-conventions/page/react-19-use-params

React 19 use(params) & use(searchParams) 언래핑

page.js
예제 열기
API Reference
학습 미완료
file-conventions/loading/nested-segment-loading

중첩 라우트 세그먼트 로딩 격리

loading.js
예제 열기
API Reference
학습 미완료
file-conventions/error/payment-error-boundary

결제 세그먼트 에러 캡처 (error.tsx)

error.js
예제 열기
API Reference
학습 미완료
file-conventions/error/reset-recovery

error.tsx reset() 컴포넌트 재시도 복구

error.js
예제 열기
API Reference
학습 미완료
file-conventions/not-found/programmatic-not-found

notFound() 프로그래밍 트리거

not-found.js
예제 열기
API Reference
학습 미완료
file-conventions/template/remount-lifecycle

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

template.js
예제 열기
API Reference
학습 미완료
file-conventions/template/input-reset-animation

진입 애니메이션 및 폼 리셋 (template.tsx)

template.js
예제 열기
API Reference
학습 미완료
file-conventions/default/parallel-fallback

Parallel Routes 미매칭 시 default.tsx 폴백

default.js
예제 열기
API Reference
학습 미완료
file-conventions/default/hard-reload-restore

새로고침(Hard Reload) 시 슬롯 복구

default.js
예제 열기
API Reference
학습 미완료
file-conventions/route/rest-api-orders

REST GET/POST 주문 API (route.ts)

route.js
예제 열기
API Reference
학습 미완료
file-conventions/route/webhook-signature

Webhook 서명 검증 핸들러 (route.ts)

route.js
예제 열기
API Reference
학습 미완료
file-conventions/route/sse-stock-stream

SSE 실시간 재고 스트리밍 (route.ts)

route.js
예제 열기
API Reference
학습 미완료
file-conventions/route-groups/group-url-isolation

URL 영향 없는 라우트 그룹 분리 (route-groups)

Route Groups
예제 열기
API Reference
학습 미완료
file-conventions/route-groups/shop-vs-admin-roots

상점용 vs 관리자용 다중 루트 레이아웃

Route Groups
예제 열기