학습 로드맵
Next.js 기초 가이드에
오신 것을 환영합니다!
App Router 기반으로 실전 블로그를 만들며 배우는 Next.js 입문 코스
이 튜토리얼은 누구를 위한 건가요?
React로 컴포넌트를 만들고, useState와 useEffect로 상태를 다뤄본 적 있는 입문자를 위한 튜토리얼입니다. "React 문법은 어느 정도 익혔는데, 실제 서비스 구조는 어떻게 잡아야 하지?"라는 궁금증이 있다면 이 코스가 정확히 그 다음 단계입니다.
왜 Next.js를 배워야 하나요?
React만으로도 UI는 충분히 만들 수 있습니다. 하지만 서비스를 만들기 시작하면 "페이지를 어떤 단위로 나눌지", "데이터를 어디서 읽고 언제 렌더링할지", "브라우저에 보낼 JavaScript를 어디까지 줄일지", "검색과 내비게이션을 어떻게 설계할지" 같은 문제가 한꺼번에 등장합니다.
Next.js App Router는 라우팅, 서버/클라이언트 컴포넌트, 서버 fetching, Streaming, 캐싱, URL 기반 내비게이션을 하나의 흐름으로 묶어 줍니다. 이 코스의 목표는 기능 이름을 많이 외우는 것이 아니라, 이 흐름을 실제 블로그 프로젝트에 연결해 보는 것입니다.
전체 학습 로드맵
이 코스는 총 4개 챕터, 19개 세션으로 구성됩니다. 큰 흐름은 구조 → 경계 → 데이터 → 이동입니다.
Ch.1. 왜 Next.js일까? + App Router 기초
CSR의 한계를 이해한 뒤 page.tsx, layout.tsx, 동적 라우트를 배우며 블로그의 뼈대를 만듭니다. 학습 결과는 홈, 소개, 글 목록, 글 상세가 연결된 기본 구조입니다.
Ch.2. Server / Client Component
서버 컴포넌트 기본값, 'use client' 경계, children/props 전달 방식, 직렬화 가능한 props를 배우며 인터랙션이 필요한 부분만 클라이언트로 분리합니다. 학습 결과는 작은 클라이언트 섬을 가진 구조입니다.
Ch.3. Data Fetching & 렌더링
하드코딩 데이터를 외부 소스로 옮기고, 서버 fetching, 정적/동적 렌더링, Streaming, 캐싱, Server Actions를 배웁니다. 학습 결과는 실제 데이터 조회와 생성 흐름이 붙은 블로그입니다.
Ch.4. Navigation + 실습 고도화
Link, usePathname, useSearchParams, useRouter, notFound를 사용해 URL 자체를 상태로 다루고 내비게이션을 다듬습니다. 학습 결과는 활성 링크, URL 기반 필터링, 404 처리가 있는 완성형 블로그입니다.
왜 이 순서로 배우나요?
Ch.1에서 먼저 폴더 구조와 레이아웃을 이해해야 Ch.2에서 'use client'를 어디에 둘지 판단할 수 있습니다. Ch.2에서 서버와 클라이언트의 경계를 세워야 Ch.3의 데이터 fetching, 캐싱, Server Action이 자연스럽게 연결됩니다. 마지막 Ch.4는 앞에서 만든 구조와 데이터 흐름을 그대로 활용해 URL, 내비게이션, 상태 공유를 정리하는 단계입니다.
챕터별 핵심 질문
Ch.1의 질문
페이지와 레이아웃은 어떤 파일 구조로 나눠야 할까?
Ch.2의 질문
어디까지 서버이고, 어디부터 클라이언트여야 할까?
Ch.3의 질문
데이터는 어디서 읽고, 화면은 언제 만들며, 변경 후에는 어떻게 갱신할까?
Ch.4의 질문
현재 상태를 URL과 이동 흐름에 어떻게 반영할까?
선수 지식
아래 내용을 이미 알고 있다면 바로 시작할 수 있습니다.
- React 기본 문법 - JSX, 컴포넌트, Hook (
useState,useEffect) - JavaScript ES6+ -
async/await, 구조 분해, 모듈 시스템 - HTML/CSS 기초 - 기본적인 마크업과 스타일링