이미지 검색을 사용해 보세요
검색창 이전화면 이전화면
최근 검색어
인기 검색어

소득공제
소플의 처음 만난 Next.js
개념은 쉽게, 실습은 탄탄하게! 따라 하며 익히는 Next.js 입문 가이드
이인제
한빛미디어 2025.06.28.
베스트
웹사이트 top20 3주
가격
39,000
10 35,100
YES포인트?
1,950원 (5%)
5만원 이상 구매 시 2천원 추가 적립
결제혜택
카드/간편결제 혜택을 확인하세요
배송안내
서울특별시 영등포구 은행로 11(여의도동, 일신빌딩) 변경
배송비?
무료

이미 소장하고 있다면 판매해 보세요.

  •  국내배송만 가능
  •  문화비소득공제 가능

이 분야의 이벤트

소문난 명강의 시리즈

상세 이미지

책소개

목차

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

저자 소개 1

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

이인제의 다른 상품

품목정보

발행일
2025년 06월 28일
쪽수, 무게, 크기
696쪽 | 183*235*25mm
ISBN13
9791169213912

출판사 리뷰

이 책은 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를 활용한 실전 개발 역량을 자연스럽게 체득할 수 있다.

추천평

프론트엔드 개발자에게 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 프로젝트를 만들고 앱 라우터를 구성하는 방법까지 단계별로 친절하게 설명해줍니다. 단순히 ‘코드를 따라 치세요’ 수준이 아니라 한 줄 한 줄 코드가 어떤 의미인지, 왜 이렇게 해야 하는지 납득할 수 있게 설명해줘서 단순 암기가 아니라 진짜 이해하면서 배울 수 있었습니다. 처음 프론트엔드를 공부하시는 분들께 정말 좋은 출발점이 되어줄 책입니다. - 한현 (재능교육 프론트엔드 개발자)

리뷰/한줄평16

리뷰

9.6 리뷰 총점

한줄평

10.0 한줄평 총점

클린봇이 부적절한 글을 감지 중입니다.

설정
35,100
1 35,100