한 입 크기로 잘라 먹는 Next.js

이정환 지음

인사이트 2025년 08월 14일 출간 국내도서 : 2025년 08월 04일 출간

작품소개

책소개

이 책은 현존 최고 메타프레임워크인 Next.js 입문서입니다. Next.js의 핵심 개념을 쉬운 용어와 도해로 풀고 코드 해설도 독자 눈높이에 맞게 상세히 달고 있어 입문자에게 안성맞춤인 책입니다. 특히 Next.js의 두 라우터 버전(페이지 라우터, 앱 라우터) 중 하나를 선택해 소개하는 게 아니라 두 버전을 발전 순서에 따라 설명함으로써, Next.js에서 라우팅 개념이 어떤 과정을 거쳐 발전했는지 깊이 이해할 수 있게 합니다. 또한 이 책은 SSR, SSG, ISR 비교, 서버 컴포넌트, 네비게이팅과 프리페칭, 캐시, 스트리밍, 서버 액션, 고급 라우터와 같은 Next.js의 핵심 기능들을 프런트엔드와 백엔드를 넘나드는 프로젝트를 직접 구현하며 익힐 수 있어 개발의 즐거움까지 더해 줍니다.

목차

지은이의 글
추천의 글

1장 Next.js 소개와 실습 환경 구축하기
- 처음 만나는 자바스크립트- Next.js를 소개합니다.
- 실습 환경 설정하기
- 타입스크립트 가볍게 살펴보기

1부 빠르게 알아보는 페이지 라우터(Page Router)

2장 페이지 라우터 버전으로 Next.js 시작하기
- Next.js 앱 생성하기
- 생성한 Next.js 살펴보기
- Next.js 앱 실행하기
- 라우팅 설정하기
- 네비게이팅과 프리페칭
- 스타일링 및 레이아웃 설정하기
- 한입북스 프로젝트 UI 구현하기

3장 페이지 라우터 버전의 Next.js 활용하기
- Next.js의 사전 렌더링과 데이터 페칭
- 서버 사이드 렌더링
- 정적 사이트 생성
- 증분 정적 재생성
- 메타 태그 및 파비콘 설정하기
- 배포하기
- 페이지 라우터 최종 정리

2부 앱 라우터(App Router) 속속들이 알아보기

4장 앱 라우터 버전의 Next.js 앱 시작하기
- 새로운 Next.js 앱 생성하기
- 라우팅 설정하기
- 레이아웃 설정하기
- 서버 컴포넌트 이해하기
- 네비게이팅과 프리페칭
- 한입북스 UI 구현하기

5장 앱 라우터 버전의 데이터 페칭
- 서버 컴포넌트 도입으로 변경된 데이터 페칭 방식
- 데이터 요청을 영구적으로 보관하는 데이터 캐시
- 페이지를 생성할 때 중복 요청을 방지하는 리퀘스트 메모이제이션
- 에러 처리

6장 페이지 캐시
- 서버의 페이지 캐시 – 풀 라우트 캐시
- 클라이언트의 페이지 캐시 – 라우터 캐시
- 라우트 세그먼트 컨픽

7장 스트리밍
- 스트리밍이란?
- 스트리밍 설정하기
- 스켈레톤 UI

8장 서버 액션
- 서버 액션이란?
- 서버 액션으로 리뷰 기능 구현하기
- 리뷰 조회 및 갱신 기능 구현하기
- 리뷰 추가 및 갱신 기능 업그레이드하기
- 리뷰 삭제 기능 구현하기

9장 고급 라우터 기법
- 병렬 라우트
- 가로채기 라우트

10장 최적화 및 배포
- 이미지 최적화
- 검색 엔진 최적화
- 배포하기

찾아보기

책 속으로

“Next.js는 사전 렌더링 방식을 도입해 리액트 CSR의 문제를 효과적으로 해결하면서도 장점은 계승합니다. Next.js는 리액트의 한계를 뛰어넘어 성능과 유연성을 크게 개선한 리액트의 확장판입니다.” (9p)

“Next.js를 배우는 가장 좋은 방법은 페이지 라우터를 먼저 빠르게 살펴본 다음, 신규 버전인 앱 라우터를 공부하는 것입니다. 이렇게 공부하면 기존 페이지 라우터에는 어떤 문제가 있고 앱 라우터는 이를 어떻게 해결했는지 자세히 알수 있습니다.”(13p)

“Next.js는 파일 이름만으로 API 엔드포인트를 설정할 수 있는 API 라우트 기능을 제공합니다. 이 기능을 잘 활용하면 하나의 앱에서 프런트엔드와 백엔드 기능을 모두 구현할 수 있습니다.”(73p)

출판사 서평

인프런, 유데미 베스트 강좌를 책으로 만나다
2024년 처음 인프런에서 개설된 '한 입 크기로 잘라 먹는 Next.js'는 현재 누적 수강생이 약 4000여 명에 이를 정도로 많은 수강생이 찾는 강좌입니다. 이 책은 바로 이 강좌를 기반으로 개발되었습니다. 무엇이든 쉽고 재밌게 설명할 방법이 있다고 믿는 저자의 철학에 기반하여, 이 책도 딱딱한 원리 설명이 주를 이루는 도서 시장에서 적절한 비유와 예시로 Next.js를 머릿속에 쏙쏙 들어오도록 쉽고 재밌게 소개합니다.

페이지 라우터에서 앱 라우터까지
2022년에 처음 공개된 앱 라우터는 Next.js의 최신 라우터입니다. 앱 라우터는 페이지 라우터의 한계를 극복하기 위해 등장한 기술입니다. 따라서 특정 기능의 경우에는 페이지 라우터를 학습하지 않고서는 앱 라우터를 제대로 이해하기 어렵습니다. 이 책은 페이지 라우터를 먼저 배우면서 라우터의 기초를 세운 다음, 앱 라우터의 새로운 기능을 추가적으로 학습합니다. 이 과정에서 왜 Vercel이 앱 라우터를 새롭게 출시했는지, 기존 라우터의 한계는 무엇이었는지, 새롭게 추가한 기능은 어떤 점이 다른지를 상세히 알 수 있어 라우팅 전반을 깊이 이해할 수 있습니다.

실무에 가까운 '한입북스' 프로젝트로 개발의 즐거움을 만나다
'한 입 크기로 잘라 먹는' 시리즈는 이론 따로 개발 따로 배우지 않습니다. '한입북스'라는 가상의 프로젝트를 개발하는 과정에서 필요한 이론을 습득하고 실무 프로젝트에 바로 적용합니다. 즉, 이론을 이해하기 위해 연관성 없는 작은 예제들을 배우는 게 아니라 실무 프로젝트 개발 과정에서 그때그때 이론을 습득하기에 실무 적용 능력을 한 단계 업그레이드할 수 있습니다. 개발 과정에서 레고 블록을 쌓듯이 서비스를 하나하나 완성해 나가는 재미는 덤입니다.

이런 분께 추천합니다
- 풀스택 개발을 희망하는 취준생으로서 Next.js가 처음인 분
- 퍼블리셔나 백엔드에서 프런트엔드로 직군 전환을 꾀하거나 업무상 Next.js가 필요한 분
- Gatsby, Remix 등 다른 프레임워크를 쓰고 있지만, 가장 많이 사용되는 Next.js를 배우고 싶은 분

독자를 위한 특별한 혜택
- 책을 구입한 분에게는 인프런, 유데미의 강좌 '한 입 크기로 잘라 먹는 Next.js' 30% 할인 쿠폰을 드립니다.
- 리액트, Next.js와 관련해 다양한 정보를 얻거나 질의할 수 있는 오픈 카톡방 및 카페 가입 정보도 함께 알려드립니다

작가정보

저자(글) 이정환

무엇이든 쉽고 재미있게 설명할 방법이 있다고 믿는 교육자입니다. 스타트업 CTO로 일하며 쌓아온 지식과 경험을 바탕으로, 아무리 복잡한 개념도 한 입 크기로 잘라 먹듯이 차근차근 공부하면 누구나 쉽게 깨칠 수 있다는 생각으로 강의와 도서를 만드는 데 노력하고 있습니다. 현재까지 인프런과 유데미에서 누적 수강생 30,000명을 배출했습니다.
수강생 및 독자와의 소통을 매우 중요시합니다. 2022년부터 오픈 채팅방과 네이버 카페를 통해 현재 약 3,000명 이상의 수강생 및 독자와 소통하고 있습니다.

강의 목록
- '한 입 크기로 잘라 먹는 리액트'
- '한 입 크기로 잘라 먹는 타입스크립트'
- '한 입 크기로 잘라 먹는 Next.js'

저서
《한 입 크기로 잘라 먹는 리액트》

약력
- 패스트캠퍼스 프런트엔드 데브캠프 멘토
- 프로그래머스 프런트엔드 부트캠프 멘토
- 코드잇 스프린트 프런트엔드, 풀스택 과정 멘토
- 스타트업 CTO