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

예제(2)Revalidating

예제(2)Error Handling

예제Image Optimization

예제Font Optimization

예제(2)Metadata and OG images

예제(2)Route Handlers

준비 중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 with Cache Components

예제(2)Migrating to Cache Components

예제(2)Adopting Partial Prefetching

예제(2)Authentication with Cache Components

준비 중CDN Caching

준비 중CI Build Caching

데이터·폼

예제(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

준비 중Tailwind CSS v3

인증·보안

예제(3)Authentication

예제(2)Data Security

예제Content Security Policy

예제(2)Environment Variables

메타데이터·인터랙션 확장

예제(3)Interactive apps

예제(2)Scripts

예제(2)Third Party Libraries

앱 아키텍처 패턴

예제(2)Backend for Frontend

준비 중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

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

/문서:crossOrigin

crossOrigin: 'anonymous' 서드파티 스크립트 속성

데모 앱을 로드하는 중...

Next.js 학습App Router 공식 문서 기반 한국어 가이드 & 실습 예제

Next.js v16.3.2 GitHub 저장소

© 2026 Next.js Study Lab. Open Source Curriculum.Next.js is a trademark of Vercel, Inc.