소플의 처음 만난 Next.js

이인제 지음

한빛미디어 2025년 06월 30일 출간 국내도서 : 2025년 06월 28일 출간

작품소개

책소개

Next.js는 현재 가장 널리 사용되는 리액트 기반 웹 프레임워크로 CSR, SSR, SSG 등 다양한 렌더링 방식부터 폴더 구조 기반의 라우팅, 서버리스 함수 구성까지 모던 프론트엔드 개발에 최적화된 주요 기능을 두루 갖추고 있다. 이제는 단순한 선택을 넘어 실무에 꼭 필요하며 커리어 성장을 위한 핵심 기술로 자리 잡았다. 이 책은 Next.js를 처음 접하는 개발자도 부담 없이 따라갈 수 있도록 기초 개념 정리부터 실습까지 한 걸음씩 짚어가는 친절한 가이드다. 타입스크립트와 개발 환경 설정부터 시작해 Next.js의 작동 방식을 이해하고 프로젝트 구조를 직접 만들어보며 자연스럽게 익힐 수 있도록 구성했다. 특히 Next.js 13부터 도입된 앱 라우터를 중심으로 페이지를 구성하는 폴더 구조와 다양한 화면 전환 방식 그리고 최신 기능들을 실습으로 쉽게 이해할 수 있도록 안내한다. 마지막에는 댓글 기능이 포함된 미니 커뮤니티 사이트를 직접 구현해보며 서버 액션을 이용한 폼 처리, Drizzle ORM 기반의 데이터베이스 연동, Vercel을 통한 배포까지 Next.js 기반 풀스택 애플리케이션 개발의 전 과정을 실전처럼 경험할 수 있다.

목차

0장 준비하기
0.1 타입스크립트
0.2 (실습) Node.js와 npm 설치하기
0.3 (실습) VS Code 설치하기
0.4 마치며

1장 Next.js 소개
1.1 리액트와 Next.js
1.2 CSR vs SSR
1.3 SSG
1.4 Next.js 탄생 배경
1.5 마치며

2장 Next.js 시작하기
2.1 (실습) 직접 Next.js 앱 생성하기
2.2 (실습) create-next-app을 사용해서 Next.js 앱 생성
2.3 (실습) 글로벌 스타일 설정 및 ESLint 규칙 변경
2.4 마치며

3장 라우팅
3.1 라우팅 기초
3.2 페이지스 라우터
3.3 앱 라우터
3.4 링크와 내비게이션
3.5 (실습) 라우트 구성하기
3.6 (실습) 병렬 라우트 사용하기
3.7 (실습) 인터셉팅 라우트 사용하기
3.8 마치며

4장 페이지와 레이아웃
4.1 페이지
4.2 레이아웃
4.3 템플릿
4.4 메타데이터
4.5 (실습) 루트 레이아웃 만들기
4.6 (실습) Feed 레이아웃 만들기
4.7 (실습) 템플릿 적용해보기
4.8 (실습) 정적 메타데이터 사용해보기
4.9 (실습) 동적 메타데이터 사용해보기
4.10 (실습) 동적으로 Open Graph 이미지 생성하기
4.11 마치며

5장 라우트 핸들러
5.1 페이지스 라우터의 API 라우트
5.2 앱 라우터의 라우트 핸들러
5.3 라우트 핸들러 사용 예시
5.4 (실습) 라우트 핸들러를 활용하여 API 만들어보기
5.5 마치며

6장 미들웨어
6.1 미들웨어란
6.2 Next.js의 미들웨어
6.3 (실습) 미들웨어 사용해보기
6.4 마치며

7장 데이터 페칭
7.1 fetch
7.2 서버 액션
7.3 (실습) 서버에서 데이터 받아오기
7.4 (실습) 서버 액션 사용하기
7.5 마치며

8장 SWR
8.1 SWR 소개 및 역할
8.2 데이터 페칭
8.3 뮤테이션과 재검증
8.4 (실습) SWR 사용하기
8.5 마치며

9장 렌더링
9.1 렌더링 기초
9.2 서버 컴포넌트
9.3 클라이언트 컴포넌트
9.4 서버와 클라이언트 컴포지션 패턴
9.5 엣지 런타임과 Node.js 런타임
9.6 (실습) 서버 컴포넌트 사용해보기
9.7 마치며

10장 캐싱
10.1 리퀘스트 메모이제이션
10.2 데이터 캐시
10.3 풀 라우트 캐시
10.4 클라이언트 사이드 라우터 캐시
10.5 캐시 상호작용
10.6 캐싱 관련 API
10.7 캐싱 요약
10.8 (실습) 캐싱 동작 확인하기
10.9 마치며

11장 스타일링
11.1 CSS 모듈과 글로벌 스타일
11.2 Tailwind CSS
11.3 CSS-in-JS
11.4 Sass
11.5 (실습) Tailwind CSS 사용하기
11.6 마치며

12장 최적화
12.1 이미지 최적화
12.2 폰트 최적화
12.3 스크립트 최적화
12.4 지연 로딩
12.5 정적 애셋
12.6 (실습) 이미지 최적화 적용하기
12.7 (실습) 폰트 최적화 적용하기
12.8 (실습) 지연 로딩 적용하기
12.9 마치며

13장 설정하기
13.1 next.config.js 파일
13.2 환경변수 설정
13.3 (실습) 환경변수 사용해보기
13.4 (실습) Redirect 적용하기
13.5 (실습) Rewrite 적용하기
13.6 마치며

14장 테스트
14.1 프론트엔드 테스트 종류
14.2 Vitest
14.3 Jest
14.4 Playwright
14.5 Cypress
14.6 (실습) Jest로 테스트하기
14.7 (실습) Playwright로 테스트하기
14.8 마치며

15장 빌드와 배포
15.1 빌드의 개념
15.2 Next.js 애플리케이션 빌드
15.3 (실습) Next.js 애플리케이션 빌드해보기
15.4 마치며

16장 미니 프로젝트
16.1 미니 커뮤니티 기획하기
16.2 (실습) Next.js 애플리케이션 생성하기
16.3 (실습) 폴더 구성하기
16.4 (실습) 페이지 생성하기
16.5 (실습) 라우트 구성하기
16.6 (실습) Shadcn UI 및 Tailwind CSS 연동하기
16.7 (실습) 데이터베이스 설계하기
16.8 (실습) Turso 데이터베이스 생성하기
16.9 (실습) Drizzle ORM 연동 및 데이터베이스 스키마 생성
16.10 (실습) NextAuth 연동하기
16.11 (실습) 라우트 핸들러로 API 만들기
16.12 (실습) 클라이언트 API 호출을 위한 함수 구현하기
16.13 (실습) SWR 연동하기
16.14 (실습) 헤더 컴포넌트 구현하기
16.15 (실습) 라우트 그룹을 사용하여 여러 루트 레이아웃 구현하기
16.16 (실습) SignInPage 구현하기
16.17 (실습) SignUpPage 구현하기
16.18 (실습) MainPage 구현하기
16.19 (실습) PostWritePage 구현하기
16.20 (실습) PostViewPage 구현하기
16.21 (실습) 미들웨어 만들기
16.22 (실습) 로컬에서 애플리케이션 작동 테스트
16.23 (실습) Vercel 배포하기

출판사 서평

이 책은 Next.js를 처음 접하는 독자도 실습을 통해 자연스럽게 기본기를 쌓을 수 있도록 구성했다. 단순히 기능을 나열하는 것이 아니라 개발의 흐름을 따라가며 왜 필요한지, 어떻게 작동하는지를 이해할 수 있도록 돕는다.

개발 환경 설정부터 차근차근
Node.js, VS Code 설치부터 타입스크립트 기초까지, 웹 개발을 처음 시작하는 독자도 무리 없이 따라올 수 있도록 준비 과정을 자세히 다룬다.

Next.js의 핵심 개념을 체계적으로 학습
CSR, SSR, SSG 같은 렌더링 방식부터 파일 기반 라우팅, 데이터 페칭, API 작성까지 Next.js의 핵심 기능을 직접 실습하며 익힐 수 있도록 구성했다.

실습 위주 구성
설명에 그치지 않고 모든 내용을 실습을 통해 바로 확인할 수 있도록 구성되어 Next.js의 다양한 기능을 자연스럽게 습득할 수 있다.

기초부터 실전 프로젝트까지
기본기를 다진 후에는 하나의 완성된 웹 애플리케이션을 만드는 프로젝트를 통해 지금까지 배운 내용을 종합적으로 활용해볼 수 있다.

★ 대상 독자
이 책은 Next.js를 처음 배우려는 모든 개발자를 대상으로 한다. 리액트 기초 지식을 갖춘 독자라면 더욱 쉽게 접근할 수 있으며 다음과 같은 분들에게 특히 적합하다.
● 리액트 기반 웹 개발을 더 체계적으로 배우고 싶은 개발자
● Next.js를 이용해 SSR, SSG를 적용한 SEO 최적화 웹사이트를 구축하고 싶은 개발자
● Next.js를 이용해 직접 웹 애플리케이션을 만들어 보고 싶은 분
● Next.js를 활용한 실무 프로젝트 경험을 쌓고 싶은 프론트엔드 개발자

★ 이 책의 구성
이 책은 크게 네 부분으로 나눌 수 있으며 각 장은 Next.js의 핵심 개념부터 실전 활용까지 단계적으로 학습할 수 있도록 구성되어 있다.

웹 개발의 첫걸음, Next.js와의 첫 만남(0~2장)
Next.js를 배우기 위한 준비 단계로 타입스크립트의 기본 개념을 간단히 익히고 Node.js와 npm 그리고 VS Code를 설치하여 개발 환경을 설정한다. 이어 리액트와 Next.js의 관계를 이해하고 CSR, SSR, SSG와 같은 렌더링 방식의 차이를 살펴본다. Next.js의 탄생 배경을 통해 프레임워크의 필요성을 배우고 직접 Next.js 프로젝트를 생성하며 기본 폴더 구조를 익히는 실습을 진행한다.

Next.js를 이해하는 가장 빠른 길, 라우팅의 세계로(3~5장)
Next.js의 핵심인 라우팅 시스템을 본격적으로 학습한다. 먼저 폴더 구조를 기반으로 하는 전통적인 페이지스 라우터를 익히고 최신 앱 라우터의 개념과 사용법을 실습한다. 동적 라우트, 병렬 라우트, 인터셉팅 라우트 등 다양한 라우팅 기법을 단계별로 체험하며 Next.js의 기본적인 작동 원리와 페이지 구성 방식을 익힌다.

Next.js의 진짜 힘을 경험하다, 실전 기능 마스터(6~15장)
실제 서비스 개발에 필요한 다양한 기능을 익혀본다. 서버와 클라이언트 컴포넌트를 구분하고 미들웨어를 이용해 요청 흐름을 제어하는 방법을 학습한다. 다양한 렌더링 전략(SSR, SSG, ISR )을 적용해 사이트 성능을 높이고, 메타데이터 설정을 통해 SEO를 강화하는 방법도 익힌다. 데이터베이스 연동, 사용자 인증, 파일 최적화 등 실무에 필요한 기술을 차근차근 쌓아나간다.

Next.js 웹 애플리케이션 구축하기(16장)
지금까지 배운 내용을 종합해 Next.js로 실제 웹 애플리케이션(미니 커뮤니티 사이트)을 만드는 프로젝트를 진행한다. 동적 라우트, 데이터 연동, 서버 기능 통합을 실습하며 하나의 완성된 서비스를 직접 구축해본다. 이 과정을 통해 Next.js를 활용한 실전 개발 역량을 자연스럽게 체득할 수 있다.

작가정보

저자(글) 이인제

어릴 적부터 컴퓨터와 프로그래밍에 관심이 많아 멋진 개발자가 되는 게 꿈이었다. 숭실대학교 컴퓨터학부를 조기 졸업하고 카이스트에서 전산학 석사 학위를 취득한 뒤, 다양한 회사와 스타트업에서 경험을 쌓았고 프리랜서 개발자로도 활동했다. 분야를 가리지 않고 항상 즐겁게 개발하려 노력하며 소프트웨어 교육에도 꾸준히 참여하고 있다. 이런 활동의 연장선으로 프론트엔드 지식 포털을 운영하고 있으며 현재는 1인 스타트업을 창업해 제품 개발과 회사를 운영하는 데 힘쓰고 있다.