처음부터 끝까지 단계별로 완성! 실무에 바로 통하는 Next.js 입문 코스

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 마치며 • 456

 

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 배포하기

16.24 (실습) 배포된 애플리케이션 작동 테스트

16.25 마치며

프론트엔드 개발자에게 Next.js는 이제 선택이 아니라 기본이 되었습니다. 하지만 처음 시작할 때 막막함을 느끼는 분들도 많습니다. 『소플의 처음 만난 Next.js』는 그 막막함을 단단히 잡아주는 책입니다. CSR, SSR, SSG 같은 다양한 렌더링 방식을 비교하고, 각각이 가진 장단점을 차근차근 설명해주기 때문에 왜 Next.js를 써야 하는지 자연스럽게 이해할 수 있었습니다. 특히 앱 라우터와 페이지스 라우터의 차이점을 실제 구조와 예시로 보여주면서 실전 감각을 길러주는 점이 매우 인상적이었습니다. 단순히 따라 하기식 실습이 아니라 코드를 왜 이렇게 짜야 하는지, 이 아키텍처가 왜 필요한지를 납득시키는 구성이라 실무에 바로 적용할 수 있는 실력을 쌓을 수 있었습니다.

이민규 - StarUML 개발자 / (주)엠케이랩스 대표

 

Next.js는 분명 매력적인 프레임워크지만 처음 접하는 사람에게는 그 구조와 렌더링 방식이 다소 부담스럽게 느껴질 수 있습니다. 이 책은 이런 어려움을 친절하게 풀어냅니다. 기초부터 차근차근 올라가는 방식으로 구성되어 초보자도 자연스럽게 Next.js의 핵심 원리를 이해하고 실전 개발에 필요한 감각을 익힐 수 있습니다. 특히 CSR, SSR, SSG의 차이와 적용 방식을 시각적으로 설명한 부분은 Next.js 입문자에게 커다란 장벽이 될 수 있는 렌더링 방식을 쉽게 넘을 수 있도록 도와줍니다. 복잡한 개념도 구체적인 예제와 풍부한 그림 그리고 실습 중심의 설명 덕분에 누구나 손쉽게 체득할 수 있도록 안내합니다. 이 책은 단순한 입문서 그 이상입니다. Next.js를 제대로 배우고 싶은 모든 이에게 그리고 웹 프론트엔드 개발자로서 한 단계 성장하고 싶은 이에게 강력히 추천합니다.

임준성 - 카이스트 연구원

 

급변하는 프론트엔드 기술 트렌드 속에서 Next.js는 필수적인 기술로 자리 잡았습니다. 『처음 만난 Next.js』는 이 프레임워크의 표면적 기능에 그치지 않고 Next.js의 철학과 작동 원리까지 명확하게 짚어줍니다. 리액트 서버 컴포넌트, 동적 라우팅, 서버 사이드 렌더링과 정적 사이트 생성 같은 복잡한 주제를 깊이 있게 다루면서도 초보자도 이해할 수 있도록 풀어낸 설명이 인상적입니다. 또한 왜 특정 렌더링 방식을 선택해야 하는지, 어떻게 페이지를 최적화할 수 있는지, 무엇이 좋은 사용자 경험을 만드는지를 자연스럽게 익히게 됩니다. 특히 마지막 장의 실전 웹 애플리케이션 프로젝트는 지금까지 배운 개념을 실제 개발로 연결해주는 훌륭한 다리 역할을 합니다. Next.js를 깊이 있게 이해하고 자신만의 웹 서비스를 만들고자 하는 개발자에게 이 책이 든든한 길잡이가 되어줄 것입니다.

장래영 - 비햅틱스 소프트웨어 엔지니어

 

프론트엔드는 빠르게 변화하지만, 그 흐름 속에서 기술의 본질을 꿰뚫는 개발자는 드뭅니다.『소플의 처음 만난 Next.js』는 바로 그 본질을 짚어주는 책입니다. 이 책은 SSR이 왜 필요하게 되었는지, SSG가 어떤 문제를 해결했는지, 그리고 서버 컴포넌트의 도입이 프론트엔드 개발에 어떤 전환점을 가져왔는지를 깊이 있게 설명합니다. 라우팅 트리와 폴더 구조를 익히는 과정에서는 단순히 코드를 따라 치는 것을 넘어 시스템을 설계하는 관점에서 사고하는 법을 배울 수 있습니다. 실습을 따라가다 보면 어느새 웹 애플리케이션의 구조를 이해하고 설계 감각까지 키우고 있는 자신을 발견하게 될 것입니다.

윤재윤 - 휴이노 프론트엔드 리드

 

모르는 걸 알게 될 때 그 과정이 친절하고 체계적이면 더 오래 기억에 남습니다. 이 책이 딱 그렇습니다. 타입스크립트 기초 문법부터 시작해서 CSR, SSR, SSG 같은 렌더링 방식을 그림과 함께 차근차근 설명합니다. 개념만 설명하는 게 아니라 실습과 바로 연결해보면서 손으로 체득할 수 있게 도와줍니다. 특히 각 장마다 정리된 요약 덕분에 필요한 부분만 빠르게 복습하기도 좋고 처음 배우는 분도 막힘없이 따라갈 수 있는 좋은 커리큘럼을 갖췄습니다.

이창건 - 뤼튼테크놀로지스 소프트웨어 엔지니어

 

Next.js를 처음 배우려고 할 때 가장 어려운 건 어디서부터 어떻게 시작해야 할지 감이 안 잡힌다는 점이었습니다. 『소플의 처음 만난 Next.js』는 이런 고민을 완전히 해결해줍니다. VS Code 설치, Node.js 설치, 타입스크립트 기초 문법 같은 아주 기초적인 부분부터 시작해 Next.js 프로젝트를 만들고 앱 라우터를 구성하는 방법까지 단계별로 친절하게 설명해줍니다. 단순히 ‘코드를 따라 치세요’ 수준이 아니라 한 줄 한 줄 코드가 어떤 의미인지, 왜 이렇게 해야 하는지 납득할 수 있게 설명해줘서 단순 암기가 아니라 진짜 이해하면서 배울 수 있었습니다. 처음 프론트엔드를 공부하시는 분들께 정말 좋은 출발점이 되어줄 책입니다.

한현 - 재능교육 프론트엔드 개발자