Next.js 전체 챕터 안내

핵심 개념

Next.js 트랙 전체 34챕터(소개 4 + 기초 10 + 중급 10 + 심화 10)의 로드맵과 추천 학습 순서를 한눈에 본다.

본문

이 트랙은 기초 → 중급 → 심화 순서로 구성되어 있습니다. 총 34챕터(소개 4챕터 + 본편 30챕터)로 Next.js을(를) 완전 정복합니다.

📚 Next.js 트랙 전체 챕터 안내

🎯 소개 (CH.1~4)

CH	제목	핵심
01	Next.js 배워서 어디에 쓸까?	활용 분야 + 시작 가이드
02	Next.js 전체 챕터 안내	이 페이지
03	Next.js 대표기업 서비스	Vercel·TikTok·Hulu·Notion·당근
04	AI 프롬프트로 Next.js 200% 활용하기	11개 실전 프롬프트

🟢 기초 (CH.5~14)

CH	제목	핵심
05	Next.js App Router 해부: 폴더 구조	App Router
06	Server Component 해부: 서버 렌더링	서버 컴포넌트
07	layout.tsx 해부: 공유 레이아웃	레이아웃
08	Dynamic Route 해부: [slug] 동적 라우팅	동적 라우팅
09	metadata API 해부: SEO 최적화	metadata
10	Image 컴포넌트 해부: 이미지 최적화	Image 최적화
11	Link 컴포넌트 해부: 클라이언트 사이드 네비게이션	Link
12	Route Handler 해부: API 엔드포인트	Route Handler
13	Middleware 해부: 요청 인터셉트	Middleware
14	Server Actions 해부: 서버 함수	Server Actions

🟡 중급 (CH.15~24)

CH	제목	핵심
15	loading.tsx & Suspense 해부	loading·Suspense
16	error.tsx & not-found.tsx 해부	error·404
17	Data Fetching 해부: fetch & cache	fetch·cache
18	next.config.ts 해부: 프로젝트 설정	next.config
19	Next.js 최종 문법: 전체 통합	문법 통합
20	Next.js 실전: 블로그 목록 페이지	블로그 목록
21	Next.js 실전: 검색 기능 (useSearchParams)	검색 기능
22	Next.js 실전: 인증 시스템 (NextAuth)	NextAuth
23	Next.js 실전: Supabase DB 연동	Supabase 연동
24	Next.js 실전: 이미지 갤러리	이미지 갤러리

🔵 심화 (CH.25~34)

CH	제목	핵심
25	Next.js 실전: 대시보드 레이아웃	대시보드
26	Next.js 실전: SEO 최적화 블로그	SEO 블로그
27	Next.js 실전: 다국어 i18n	다국어
28	Next.js 실전: 결제 시스템 (Stripe)	Stripe 결제
29	Next.js 실전: 실시간 알림 (SSE)	SSE 알림
30	Next.js 실전: 파일 업로드	파일 업로드
31	Next.js 실전: 이메일 발송 (Resend)	이메일 발송
32	Next.js 실전: 성능 최적화	성능 최적화
33	Next.js 실전: Vercel 배포	Vercel 배포
34	Next.js 최종 미션: 풀스택 SaaS 앱	풀스택 SaaS

💡 추천 학습 순서: CH.5부터 순서대로 진행하세요. 각 챕터는 이전 챕터의 지식을 기반으로 합니다.

⏱️ 예상 소요 시간: 챕터당 약 15~~20분, 전체 약 8~~10시간

🎯 이 트랙을 마치면: Next.js의 모든 핵심 개념을 자유롭게 활용할 수 있는 능력 + 다음 트랙 준비 완료

💻 Next.js 학습 로드맵

TYPESCRIPT📋 코드 (8줄)

// CH.5~14 기초 — App Router 핵심
const beginner = ['App Router', 'Server Component', 'layout', '동적 라우트', 'metadata', 'Image', 'Link', 'Route Handler', 'Middleware', 'Server Actions'];

// CH.15~24 중급 — 실전 기능 + 첫 페이지들
const intermediate = ['loading/Suspense', 'error/404', 'fetch/cache', 'next.config', '문법 통합', '블로그 목록', '검색', 'NextAuth', 'Supabase', '갤러리'];

// CH.25~34 심화 — 실전 SaaS 기능
const advanced = ['대시보드', 'SEO 블로그', '다국어', 'Stripe', 'SSE 알림', '파일 업로드', '이메일', '성능 최적화', 'Vercel 배포', '풀스택 SaaS'];

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

Next.js 트랙 30챕터 학습 순서에서
App Router 적응이 어려운 부분과
실전에서 가장 자주 쓰는 챕터를 분석해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

이 30챕터 학습 후 만들 수 있는
Next.js 포트폴리오 5개를 챕터 매핑과 함께 추천해줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

Next.js 30챕터 전체 토픽을 분석해서
실무 활용 빈도순으로
우선 학습 순서를 정리해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

Next.js 30챕터 중에서 2026년에
Pages Router는 완전히 빼도 되는지,
꼭 배워야 하는 게 뭔지 솔직히 분류해줘.

⭐ 이것만 기억하세요

Next.js 전체 챕터 안내는 이 3가지만 확실히 잡으세요

1.Next.js 트랙: 소개 4 + 기초 10(App Router) + 중급 10(실전 기능 + 첫 페이지) + 심화 10(SaaS 기능) = 총 34

2.라우팅·서버컴포넌트 → 캐시·인증·DB → Stripe·SSE·이메일·풀스택 SaaS 순서

3.최종 미션: 풀스택 SaaS 앱 — 실제 결제까지 가능한 1인 서비스 출시 능력

💬 이 챕터 질문 보기

NEXTJS · CH.2 — 질문하거나 답변을 확인하세요

→

진행도 2 / 34

← 커리큘럼으로 ← 목록으로 (Next.js)