Next.js 입문자를 위한 10단계 로드맵

✅ Next.js란?

React 기반의 프레임워크로, 페이지 라우팅, SSR/SSG/ISR, API 서버, 이미지 최적화, 인증까지 모두 내장된 올인원 웹 프레임워크입니다.

React의 단점을 보완한 파일 기반 라우팅 시스템
서버 컴포넌트 + 클라이언트 컴포넌트 분리 가능 (Next.js 13 App Router)
SEO 최적화, 빠른 성능, 자동 코드 분할
Vercel 배포 최적화된 구조 제공

✅ 기본 파일/폴더 구조 (Pages Router 기준)

my-next-app/
├── pages/                 # 페이지 라우팅 담당
│   ├── index.js           # /
│   ├── about.js           # /about
│   └── api/               # API 라우트
│       └── hello.js       # /api/hello
├── public/                # 정적 파일 (이미지, favicon 등)
│   └── logo.png
├── styles/                # CSS, Tailwind 등 스타일링
│   └── globals.css
├── components/            # 재사용 가능한 UI 컴포넌트
├── context/               # 상태 관리 Context
├── next.config.js         # Next.js 설정 파일
├── package.json           # 프로젝트 정보
├── .env.local             # 환경변수 (비공개)

📚 Next.js 입문 커리큘럼 10단계

단계	제목	설명
1단계	React 기본기	JSX, Props, State, 이벤트
2단계	프로젝트 생성과 구조	create-next-app, 디렉토리 구조
3단계	페이지 라우팅	정적/동적 라우팅, 404
4단계	스타일링	CSS, Tailwind
5단계	데이터 패칭	SSR, SSG, CSR, ISR
6단계	API Routes	백엔드 API 구현
7단계	상태 관리	Context API
8단계	사용자 인증	NextAuth.js
9단계	이미지 최적화	next/image
10단계	배포	Vercel 배포

각 단계별 링크를 클릭하면 해당 학습 문서로 이동합니다.

학습 순서를 따라가며 실습하고, 문서 하단의 심화학습 질문까지 꼭 점검하세요!