“한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 협찬 받아 작성된 서평입니다.”
들어가며
웹개발, 특히 프론트엔드 분야에 계신 분들이라면 Next.js 는 이제 피할 수 없는 기술일 듯합니다.
Next.js는 React만으로 해결하기 어려운 문제나 한계를 극복하면서, 동시에 개발 생산성까지 높여줄 수 있는 프레임워크예요.
하지만 막상 처음부터 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 설치부터 타입스크립트 기초 문법을 간략하게 소개하는 등 처음 접하는 개발자들이 무리없이 따라올 수 있도록 한 점이 배려깊다고 생각했어요.
그리고 적절한 시각적 자료들이 있어서 특히 이해하기좋겠다는 생각이 들었는데요.
첨부한 이미지는 라우팅과 관련된 설명 부분인데, 시각적인 다이어그램들과 함께 설명해놓은 것을 보고 '아, 처음부터 이렇게 배우면 쉽고 빠르게 이해하기 좋겠다' 라는 생각이 들었어요.
마지막에는 간단한 커뮤니티 사이트를 직접 만들면서 지금까지 배운 내용을 종합적으로 활용해볼 수 있는 실습 섹션이 있습니다.
실습에서 다루는 기술 스택들을 보니 최근 트렌드와 동떨어져있지 않아서 유용하겠다는 생각이 들었는데요.
Vercel 배포, Shadcn UI, TailwindCSS 연동 같은 작업들을 경험해볼 수 있기 때문입니다.
또한 단순한 투두 리스트 같은 예제가 아니라 실제로 다른 프로젝트에 적용해볼 수도 있을만한 애플리케이션을 만든다는 점에서 실용적이라는 생각이 들었어요.
추천 이유와 대상
React의 기초는 알고 있지만 Next.js는 처음인 개발자들에게 추천해드리고싶어요.
기본적인 React의 컴포넌트 개념, JSX 문법들을 알고 있는데, Next.js만의 기능들은 모르고 계시다면, 이 책으로 입문해보셔도 좋을 것 같습니다.
기초만 소개하고 마무리짓지 않고, 최적화 방법과 실전 프로젝트까지 경험해볼 수 있으니 도움이 될 수 있을 것 같아요.
마치며
Next.js는 여러 문제점과 한계점을 극복할 수 있는 강력한 도구입니다.
하지만 Next.js에서만 적용되는 기능들이 분명 존재하기에, 개인적으로 학습 곡선이 엄청 낮다고만은 할 수 없을 것 같아요.
그렇지만 이 책을 통해서 학습한다면 학습 부담이 크게 줄어들 수 있겠다는 느낌을 받았습니다.
'소플' 도서 시리즈에는 Next.js 말고도 React를 다루는 책도 있는 걸로 알고 있어요.
관심이 있으시다면 읽어보셔도 좋을 것 같습니다.
