교재 목차
App Router의 라우팅·렌더링·데이터 요청에서 인증·성능·SEO·테스트·배포까지 Next.js 애플리케이션을 완성합니다.
Next.js를 처음 배우면 기능이 많아서 어디서부터 익혀야 할지 막막할 수 있습니다. 이 교재는 Next.js 16을 기준으로 App Router 중심의 흐름을 따라가도록 구성했습니다. 라우팅과 레이아웃, 서버 컴포넌트와 클라이언트 컴포넌트의 구분에서 시작해 데이터 페칭과 캐싱으로 넓히고, 폼, 인증, Route Handler, 성능과 SEO를 이어 실제 애플리케이션의 요청 흐름을 완성한 뒤, 테스트, 배포, 국제화, 실전 프로젝트와 문제 진단까지 19개 장으로 다룹니다. 각 장에서는 기능의 사용법과 함께, 코드를 어디에서 실행하고 무엇을 캐시하며 실패를 어느 단계에서 처리할지 판단하는 방법을 설명합니다.
예제는 create-next-app@16으로 만든 TypeScript 프로젝트(App Router, src/ 디렉터리)를 기준으로 하며, React 19.2 이상을 전제로 합니다. Node.js의 최소 버전은 Next.js 16 자체가 요구하는 20.9이지만, 뒤의 장에서 설치하는 도구 가운데는 더 높은 버전을 요구하는 것이 있습니다. 2026년 11월 현재 설치되는 버전을 기준으로, 9장의 Sass와 17장의 Mongoose는 Node.js 20.19 이상을, 14장의 @testing-library/jest-dom과 Cypress, 15장의 Netlify CLI, 19장에서 소개하는 Jotai는 Node.js 22 이상을 요구합니다. Node.js 20은 2026년 4월에 지원이 끝났으므로, 실습에는 처음부터 지금 지원 중인 LTS를 설치하기를 권합니다. 스타일링은 Tailwind CSS 4, 인증은 Auth.js v5(next-auth@beta), 데이터베이스는 MongoDB와 Mongoose를 쓰고, 데이터 페칭 예제의 목 API는 json-server 0.17.4로 맞춥니다. 각 도구의 설치 명령과 버전 조건은 해당 글에 적어 두었습니다. 본문에 실은 실행 결과와 화면, 콘솔 출력은 Next.js와 각 도구의 공식 문서에 적힌 동작을 따라 손으로 따져 본 예상값이며, 실제로 실행해 옮긴 출력은 아닙니다. 예제를 볼 때는 먼저 결과를 예상한 뒤 본문과 비교하고, 직접 실행해 다르게 나오면 어느 단계에서 갈라졌는지 따라가 보세요.
첫 목표: 첫 번째 Next.js 앱 띄우기
Next.js 16 소개와 App Router vs Pages Router를 읽고, 학습 목표 및 전제 조건에서 필요한 웹과 React의 기초를 확인합니다. 이어 node.js 및 npm 설치와 Next.js 16 프로젝트 생성을 따라 프로젝트를 만들고, 프로젝트 구조에서 src/app/layout.tsx와 src/app/page.tsx가 어떻게 이어져 첫 화면이 그려지는지 확인합니다. 개발 서버 실행 및 기본 설정에서 npm run dev로 서버를 띄우고, page.tsx를 고쳐 저장했을 때 브라우저에 바로 반영되면 첫 목표를 마친 것입니다. 화면이 바뀌지 않으면 개발 서버가 실행 중인지와 터미널에 나온 주소를 열었는지, 터미널과 브라우저 Console에 오류가 있는지부터 확인하세요.
이 교재는 HTML, CSS, JavaScript와 React의 기초를 안다고 가정합니다. 컴포넌트, props, state, 훅이 낯설다면 React 교재로, Promise와 모듈 같은 JavaScript 문법이 낯설다면 웹 입문 교재로 돌아가 복습하세요. TypeScript의 타입 표기가 어렵다면 타입스크립트 교재를 함께 보면 좋습니다.
학습 경로
교재 전체를 읽는다면 다음 여섯 단계를 차례로 따라가세요.
1단계 · 시작과 App Router 기초(1–5장)에서는 Next.js 16의 특징과 App Router, Pages Router의 차이, 개발 환경과 프로젝트 구조에서 시작해, 파일 기반 라우팅으로 페이지와 레이아웃을 만들고 링크로 잇는 방법을 익힙니다. 이어 동적 라우트, 중첩 라우트, Catch-all 세그먼트, 라우트 그룹으로 라우팅을 넓히고, 페이지와 레이아웃, 템플릿 컴포넌트와 로딩 UI를 다룹니다.
2단계 · 데이터와 컴포넌트(6–8장)에서는 서버 컴포넌트에서 데이터를 가져오는 방법과 SSG, SSR, ISR의 차이, 클라이언트 컴포넌트의 데이터 페칭을 익힙니다. 그다음 서버 컴포넌트와 클라이언트 컴포넌트를 나누고 조합하는 기준과 use client 지시어를 배우고, React의 상태 관리와 서버 액션, 폼 제출과 상태 관리 도구로 이어 갑니다.
3단계 · 스타일링, 인증, Route Handler(9–11장)에서는 CSS 모듈, Sass, CSS-in-JS, Tailwind CSS로 화면을 꾸미고, Auth.js로 로그인과 로그아웃, 보호된 라우트, 역할 기반 접근 제어를 구현합니다. 이어 Route Handler로 HTTP 메서드를 처리하고, Proxy와 외부 API 통합으로 서버 쪽 요청 흐름을 완성합니다.
4단계 · 최적화, SEO, 테스트, 배포(12–15장)에서는 이미지와 폰트, 코드 분할과 메모이제이션으로 성능을 다듬고, 정적과 동적 메타데이터, Open Graph, robots.txt와 sitemap.xml로 검색 엔진 노출을 준비합니다. 그다음 단위, 통합, E2E, 컴포넌트 테스트를 작성하고, Vercel과 외부 호스팅에 배포하며 환경 변수와 커스텀 도메인을 설정합니다.
5단계 · 고급 주제와 실전 프로젝트(16–17장)에서는 국제화 라우팅, PWA, 서버리스 함수, WebSocket 같은 고급 기능을 살펴본 뒤, 온라인 북스토어를 기획하고 설계해 인증, 도서 목록, 장바구니, 주문, 배포까지 단계별로 구현하고, 코드 리뷰와 확장 방향으로 마무리합니다.
6단계 · 문제 해결과 생태계(18–19장)에서는 자주 만나는 오류를 발생 단계별로 진단하고, 성능 병목을 측정하며, 브라우저 개발자 도구와 서버 쪽 로깅, 모니터링으로 문제의 위치를 좁힙니다. 마지막으로 함께 쓰기 좋은 라이브러리와 커뮤니티, 공식 문서를 활용하는 방법을 정리합니다.
장마다 다루는 예제와 시작 상태가 다르므로, 하나의 앱을 19장 내내 이어서 완성하는 과정으로 보지는 마세요. 17장의 실전 프로젝트는 앞 장들의 기능을 모아 하나의 앱으로 만드는 장입니다. 필요한 기능부터 골라 읽을 때도 해당 글이 전제하는 개념과 제공하는 파일을 먼저 확인하고, 패키지 버전은 글에 적힌 조건을 실습하는 시점의 공식 문서와 비교하세요.
다른 교재로 이어 가기
Route Handler 대신 별도의 백엔드 서버를 만들고 싶다면 NestJS나 Spring으로, HTTP 요청과 응답, 캐시가 네트워크에서 어떻게 오가는지 더 알고 싶다면 네트워크로 이어 갑니다.