Next.js는 React 기반의 웹 애플리케이션 프레임워크입니다. 리액트는 현재 프론트 시장에서 시장을 점유하고 있습니다.다른 기반의 프레임워크와 달리 다양한 효용성을 비롯하여 다양하게 사용이 되고 있습니다. 그리고 네이티브를 통하여 모바일 까지 손쉽게 지원되기 때문에 더욱더 개발 생산성과 사용자 경험을 동시에 향상시키는 데 강력한 기능들을 제공합니다. 거기에 NEXT.JS는 리액트가 가지고 있지않은 장점을 가지고 있는 프레임워크라고 할 수 있습니다.

NEXT.JS는 큰 특징은 두가지가 있습니다. SSR(서버 사이드 렌더링)**과 SSG(정적 사이트 생성), ISR(증분 정적 생성) 입니다.

이는 서버에서 바로 화면을 만들거나 이미 화면을 만들어서 웹사이트가 로딩하는 시간을 단축시킬 뿐아니라 사용자 입장에서도 불편함을 없애주는 강력한 역할을 합니다. 기존의 React 단독으로는 클라이언트 렌더링만 가능하지만, Next.js는 요청 시 서버에서 HTML을 미리 생성해 SEO에 유리합니다. 미리 정적인 페이지로 빌드하거나, 특정 조건에 따라 서버에서 페이지를 생성해 빠른 사용자 응답을 가능하게 합니다.

이러한 기반의 Next.js는 다양한 파일 기반라우팅을 통하여 페이지의 생성만으로 자동 라우팅이 됩니다. 또한 API Routes 지원하기 때문에 Express나 별도 백엔드 없이도 pages/api 내에서 API 엔드포인트를 정의할 수 있어 간단한 백엔드 기능까지도 빠르게 구현할 수 있습니다. 리액트를 기반으로 하는 회사이거나 사이트라면 이제는 NEXT.JS 최신의 기술의 배워나가야 합니다.

Next.js는 또한 이미지기반을 개선의 도움을 줍니다. next/image 컴포넌트를 사용하면 자동으로 lazy loading, WebP 변환, 리사이즈 최적화 등이 적용되어 성능 개선에 도움을 줍니다.또한 자바스크립트 => 타입스크립트로 개선되어왔습니다. NEXT.js는 타입스크립트 기본 지원, ESLint, Prettier 설정의 자동화, Fast Refresh 기능 등을 통해 개발과 디버깅 효율을 크게 높일 수 있는 장점이 있습니다.

Next.js는 글로벌 대기업과 스타트업 모두에서 널리 사용되고 있습니다.

클라우드 컴퓨팅을 제공하는 Vercel는 Next.js의 개발사이며, 자체 웹사이트 및 클라이언트 프로젝트에 광범위하게 사용 중입니다. 그외에도 우리가 흔히 아는 Twitch, TikTok, Netflix, GitHub, LINE, 쿠팡, 토스(Toss), 배달의민족(우아한형제들) 등 국내 기업도 빠르게 Next.js 채택 중에 있습니다. 새로 하는 프로젝트와 리팩토링을 Next.js로 하는 만큼 널리 사용됩니다.

한빛미디어 소플의 처음 만난 Next.js에서는 기본적인 개념을 시작으로 따라익히면서 다양함을 배울 수가 있습니다. 최신버전인 리액트 19와 Next.js 15기반을 통하여 타입스크립의 기초를 시작으로 개발환경을 설정부터 저자 개발자와 같이 합니다. 그리고 프레임워크를 배우는것에서 넘어 User에서 Browser그리고 Server를 뿐만 아니라 Database의 과정을 상세히 설명하여 주니어 개발자에게도 다양함을 배우도록 합니다.

그리고 실무에서 사용하는 주요기능을 소개하고 보여줍니다. 그로인하여 서버컴포넌트, 데이터패칭 등 다양한 기술을 학습할 수 가 있습니다. 프론트기반의 언어와 Next.js라는 프레임워크를 통하여 다양함을 배울 수가 있습니다. 리액트기반의 프레임워크를 통하여 CSR, SSR, SSG 등 다양한 랜더링 방식부터 폴더 구조 기반의 라우팅을 가지고 있습니다.

제0장에서는 리액트의 설치부터 프론트로만 프로젝트를 구현하기위한 Node.js을 설치와 Npm설치를 시작으로 차근차근히 진행을 합니다. 소플의 처음 만난 Next.js는 기본적으로 자바스크립트를 어느정도 아는 개발자와 주니어에게 추천합니다.

제1장에서는 Next.js를 소개합니다. 리액트를 기반으로 Next.js를 추가적인 기능을 소개하고 배웁니다. CSR과 SSR을 통하여 다양함을 배우고 SSG를 이용하여 배울 수가 있씁니다. 그리고 간단한 역사를 배웁니다.

제2장에서는 다양한 실습을 통하여 Next.js의 처음 입문을하게 됩니다. 그리고 create-next-app을 사용하여 Next 앱을 생성하고 실습 글로벌 스타일 설정 및 ESLing 규칙들을 통해 배우는 과정을 가지게됩니다.

제3장에서는 라우팅은 무엇이고 라우팅의 기초개념부터 페이지스 라우터, 앱라우터, 링크와 내비게이션같은 Next.js에서 사용하는 다양한 라우팅을 실습합니다.

제4장을 UI,UX요소가 중점인 페이지와 레이아웃의 위치에대해 학습하게 됩니다. 이를 통하여 페이지,레이아웃,템플릿,메타데이터 그리고 이를 만들었으면 실습을 하면서 동적,정적 라우팅의 변하를 직접 경험을 해볼 수가 있습니다.

제5장은 라우트 핸들러로서 제3장에서 배운 라우팅을 활용하는 법을 배웁니다. 페이지스 라우터의 API 라우트와 앱 라우터의 라우트 핸들러를 통하여 예시를 배우면서 직접 사용을 하게 됩니다.

제6장 부터는 미들웨어의 개념을 배웁니다. 미들웨어는 각 다른 프로젝트나 각 API를 연결해주는 통로라고 생각하면 쉬운데 이러한 개념은 어느정도 규모가 있는 프로젝트에서 EAI을 통하여 경험을 하게 됩니다. 이를 통하여 미들웨어를 직접 배울 수가 있습니다.

제7장은 제6장에서 배운 미들웨어의 사용법을 이용하여 배울 수가 있습니다. 데이터의 fecth를 통하여 서버액션을 배우고 이를 통하여 서버와 데이터의 연결 관계를 배울 수가 있습니다 . 그렇기 때문에 주니어 개발자나 이제 혼자 홈페이지를 구축하려는 분들도 이러한 과정을 이해하면서 다양하게 배울 수가 있는 장점이 있습니다.

제8장은 SWR을 소개합니다. SWR은 먼저 캐시(stale)로부터 데이터를 반환한 후, fetch 요청(revalidate)을 하고, 최종적으로 최신화된 데이터를 가져오는 전략으로서 소플의 처음만나 Next.js에서는 SWR을 소개와 데이터 패팅 뮤티에션과 재검증을 이용하기 위한 방법을 상세히 배울 수가 있습니다.

제9장 랜더링은 랜더링의 기초뿐만 아니라 서버컴포넌트, 클라이언트 컴포넌트, 서버와 클라이언트 컴포지션 패턴을 더붙어 엣지와 Node의 런타임 등 다양함을 배울 수가 있습니다.

제10장 캐싱 리퀘스트 메모이제이션에서는 동일한 요청을 반복할 때 결과를 저장해 불필요한 연산을 줄이는 방법과 데이터 캐시에서는 서버나 클라이언트에서 데이터를 효율적으로 저장하고 재활용하는 전략을 학습합니다.

제11장에서는 다야한 스타일링의 대해 배우고 학습할 수가 있습니다. CSS 모듈 & 글로벌 스타일에서는 컴포넌트 단위 스타일링과 전역 스타일 관리 방법을 배웁니다. Tailwind CSS에서는 유틸리티 기반 프레임워크를 사용해 빠르고 일관된 디자인을 구현하는 방법을 익힙니다.

제12장는 이미지 최적화에서는 다양한 이미지 포맷과 전략을 통해 성능을 개선하는 방법을 학습할 수가 있습니다. 폰트 최적화에서는 웹폰트를 효율적으로 로드하여 렌더링 속도를 높이는 방법을 다룹니다. 스크립트 최적화에서는 불필요한 스크립트를 줄이고 필요한 스크립트만 효율적으로 로드하는 기법을 학습합니다.

제13장에서는 next.config.js에서는 Next.js의 핵심 설정 파일을 이해하고 수정하는 방법을 학습합니다.환경변수 설정에서는 프로젝트 내에서 환경변수를 정의하고 안전하게 사용하는 방법을 다룹니다.

제14장에서는 이제 개발에서 가장중요하다고 할 수 있는 테스트단계 입니다. 프론트엔드 테스트 종류에서는 단위 테스트, 통합 테스트, E2E 테스트의 개념을 학습합니다. Vitest, Jest, Playwright, Cypress 소개에서는 각 테스트 프레임워크의 특징과 차이점을 다룹니다.

제15장에서는 이제 개발을 하면 빌드와 배포의 개념에 대하여 학습합니다. 빌드 개념에서는 빌드 과정이 무엇인지, 그리고 왜 필요한지 학습합니다. Next.js 빌드 프로세스에서는 Next.js 애플리케이션의 빌드 과정과 내부 동작을 이해합니다. 직접 실습하면서 배포합니다.

제16장에서는 이제 미니 프로젝트: 커뮤니티 웹앱을 만들어 볼 수가 잇습니다. 실제적으로 앞장에서 배웠던것을 하나하나 복습을 하면서 실습을 할 수가 있습니다. 직접 실행부터 배포까지 다양한것을 배울 수가 있습니다.



“한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 협찬받아 작성된 서평입니다.”

React.js 다음은 Next.js, 어떻게 보면 당연한 수순 같다. 이 책을 보기 전 소플의 React.js 책을 읽었다. 업무 때문에 React.js를 class 사용하는 코드를 작성하다가 훅을 사용하는 코드로 넘어가고 있었던 시절이랬다. 심지어 담당하던 클라이언트 개발자가 퇴사해서 혼자 백엔드와 프론트엔드를 꾸역꾸역 하고 있던 시기에 React.js를 이해하기 위해 무던히 애쓰던 그 시기에 이 책을 읽고 다시 한 번 기초 개념을 다지는 데 유용했던 기억이 있다. 그래서 기대를 안고 Next.js 책을 선택했다.

지금은 새로운 담당 개발자가 있어 레거시 코드를 점차 최신화 하고 있다. 그런데 얘기 도중 Next.js로 넘어갈 거라고 한다. 대충 찾아보니 SSR 사용하는 데 좋다고 한다. 내용상 SSR 사용이 그닥 필요없는데 싶었다. 왠만큼 필요하면 도입하자 할 텐데, 내 관점에서는 솔직히 불필요하다. 계속 상황이 바뀌고 있어서, 굳이 SSR 써서 싱크 맞춰 배포를 자주 할 필요가 없다.

하지만 Next.js에 SSR만 있는 게 아니니까, 체계적인 관리를 위해서라도 도입은 피할 수 없어 보였다. 그러니 별 수 있나, 공부해야지.

그래서 이 책이 더욱 기대가 되었다. 얼마나 많은 기초 개념을 다질 수 있을까 싶어서 말이다.

결론부터 말한다. 보고, 생각하고, 따라해보라. 그러면 내 것이 된다. 그래서 인내가 필요하고, 아무래도 앞뒤로 계속 페이지를 왔다갔다 해야 할 수 있다. 이건 소플 문제가 아니다. Next.js가 가진 특성 때문이다.

사이트를 구조적으로 작성하고 관리하기 위해 정의한 개념이 상당하다. 거기에 맞춰 새로운 표기법 같은 걸 많이 정하다보니 그렇다. 한 번에 다 외워지진 않는다. 막말고 ()와 [] 차이점을 바로 설명하라고 하면 어버버 할 수밖에 없다. 아마 밥먹듯이 자주 쓰면서 그 결과를 눈으로 입으로 체득한 후에라야 바로바로 말할 수 있을 터다.

바로 그렇게 만들어주기 위해 실습 분량이 상당하다. 이걸 따라하려면 인내가 필요한 게 흠이라면 흠.

3, 4, 5장은 기초 중의 기초니, 지루하거나 힘들어도 무조건 봐야 한다. 절대 눈으로 말고 코드를 직접 작성해보는 걸 추천한다.

6, 7장은 이제 서버쪽 이해를 높혀야 하는 시점이다. 그러다가 8장에서 SWR 소개를 하는데, React Query에 익숙하다면 뭐 알고 가면 좋고, 모른다면 알아둬야 한다. 개인적으로는 표준처럼 쓰인다면 그걸 더 선호하는 편이다. 다른 건 없고, 없어질지 모른다는 불안에 안 떨어서 좋다. 심지어 계속 개선되니 보안 대응하기도 좋다.

9, 10장은 이해가 쉽지 않더라도 외우고 자신의 것으로 무조건 만들어야 한다. 이걸 등한시 하면 나중에 실무할 때 무척 괴로워질 것이다. 잘 모르면, 왜 안 되는 거지, 라는 말을 지겨울 정도로 하기 쉽다.

11장은 하아… 실무 관점에서 정답은 없는데, 뭐 최신 트렌드가 Tailwind CSS다보니 모르면 억울할 것 같다. 개인적으로는 워낙 옛날부터 bootstrap에 익숙해서 좀 당황스럽긴 하다. 가볍고 좋다니까 익해두면 좋겠다. 담당 개발자가 이걸로 대체해 나간다고 한다. 개인적으로는 반대인데, 업무적으로는 뭐…

12, 13, 14, 15장은 마무리 단계로 보인다. 잘 해두면 깔끔하게 정리할 수 있고, 못하면 은근히 괴롭다. (무겁다느니, 느리다느니, 덩치가 커서 곤란하다느니…)

16장 미니 프로젝트를 반복해보면서 기초를 마무리하면 좋다. 눈으로 보는 것도 중요하지만 실제로 손가락을 놀리면서 보고 동시에 생각하면서 결과를 머릿속에 그리는 연습을 하면 나중에 많은 도움이 될 거다.

실제 필드로 나가보면 누구는 vue.js가 좋다느니 react.js가 좋다느니, 그래서 next.js가 좋네, 싫네 말들이 많을 수 있다. 누구 말이 옳은지는 객관적으로는 알 수 없다. 서로가 장단이 있고, 자신에게 맞는 형태가 있고 없고 차이같다.

적어도 React.js를 선택했다면 Next.js는 다음 단계로 꼭 알고 가자. 그게 순리같다. 이 책이 그 길안내를 잘 해줄 것이다.

"한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 협찬 받아 작성된 서평입니다."
 

소플의 처음 만난 Nect.js

안녕하세요. 요즘 "소플의 처음 만난 Next.js" 책을 열심히 보고 있는 올드 개발자입니다. 이번 시간에는 이 책을 통해 Next.js를 공부해 본 제 경험과 느낌을 공유해보려고 합니다. (참고로 저는 React와 Next.js는 한 두번 토이 프로젝트만 해본 완전 초보자입니다. ^^)

이 전에 다양한 예제 코드를 따라해보고, 미니 프로젝트도 해봤습니다만, 너무 과한 개념은 무리무리~ 이 책은 기초부터 탄탄하게 잡는 게 더 쾌적한 학습 진행을 줘서 만족감이 좋더군요.

리액트 vs Next.js: 프레임워크의 진가

리액트가 UI 라이브러리라면 Next.js는 웹 애플리케이션 전체의 흐름을 관리하는 프레임워크라는 점을 명확히 설명해준 부분은 가끔 햇갈렸었는데 잘 와닿더군요. "라이브러리는 모듈식 사용, 프레임워크는 일관된 구조 제공"이라는 설명을 보고 오... 그렇군 하고 끄덕.

이거 전에 다른 Next.js 강의도 들어봤었는데, 라우팅이나 API 연동 부분에서 한 눈에 안 보이는게 힘들더라고요. 덕분에 이해도 수월치 않았고요. 그래서 바로 중간에 포기... ㅜㅜ

이 책에서 "라우팅 기초" 부분을 보고 오... 역시 라우팅을 트리 구조로 시각화해놓으니 더 쉽게 느껴집니다.

라우트 그룹: 대규모 앱의 구원자

라우트 그룹을 활용해 공통 레이아웃이나 API 엔드포인트를 묶는 방법은 대규모 앱 진행시 필요한 내용이라 눈여겨 해봤습니다.

처음에 라우트 그룹을 적용해보니... 코드가 완전 정리되네요. 오.. 소름돋네요. 프로젝트 구조가 말끔해지는 걸 보니 좋네요. 무엇보다 유지보수성이 확 올라간 게 느껴집니다.

플레이(아니 개발) 시간은 그리 길지 않은데 의외로 개념 이해에 도움이 많이 되네요. 강추. 다음에 프로젝트 시작할 때는 꼭 이 방식으로~

미니 프로젝트: 블로그 만들기

미니 프로젝트인 블로그 앱 제작은 그동안 배운거로 재미있게 잘 해봤네요. 데이터베이스 연동부터 유저 인증(NextAuth.js), Vercel 배포까지 엔드투엔드 워크플로우를 경험할 수 있었죠.

특히, SEO와 메타데이터 관리 부분에서 정적/동적 메타데이터 설정법을 배운 건 나중 제 토이 사이트에도 바로 적용할 수 있어서 정말 유용했습니다. 검색 엔진 최적화라는 말만 들어도 머리 아팠는데, 쉽게 설명해줘서 감동이었어요.

아쉬운 점??

다만, 책에서 커스텀 서버나 마이크로서비스 아키텍처와의 통합에 대한 설명 같은 좀 더 디테일한 부분이 부족한 건 아쉬웠습니다. 이건 아마도 입문서의 범위를 고려하면 이는 이해할 수 있는 부분이었고, 기초를 탄탄히 다진 후에 고급 주제로 넘어가는 게 더 좋겠다는 생각이 들었어요.

입문서로는 딱일 듯

코드 예시가 풍부하고, 미니 프로젝트를 통해 실제 적용 경험까지 쌓을 수 있어서, Next.js를 빠르게 습득할 수 있었어요. 처음 Next.js를 접할 때는 라우팅, 빌드, 배포 등 개념들이 복잡하게 얽혀 헤맸는데, 머릿속이 정리되는 느낌이었습니다. 

"한빛미디어 서평단 <나는 리뷰어다> 활동을 위해서 책을 협찬받아 작성된 서평입니다."

이번에 읽게 된 책은 <소플의 처음 만난 Next.js> 라는 책입니다. 이전에 React, AWS 시리즈도 있었는데 최근에는 Next.js에 대한 책이 나왔고 한번 읽어보고 싶었던 책이기 때문에 재밌게 읽을 수 있었습니다. 책의 저자이신 소플이라는 닉네임을 사용하시는 이인제 멘토님과는 이전에 교육과정에서 멘토-멘티 관계로 만났었는데 그때 도움을 되게 많이 받았기 때문에 더 기대하면서 읽을 수 있었습니다.

이 책의 표지를 보면 "개념은 쉽게, 실습은 탄탄하게!"라고 책을 소개하고 있는데 정확한 설명이라고 생각합니다.

Next.js라는 프레임워크를 사용하며 개발하기 위해 필수적인 개념들을 순차적으로 소개하고 있고, 각 챕터의 마지막에는 그 개념에 대해서 직접 코드를 작성하면서 실습을 해볼 수 있습니다. 그리고 개인적으로는 책을 읽으면서 회사에서 되게 겉으로는 살짝 무뚝뚝할 때도 있지만 뒤에서는 생각보다 나를 챙겨주려고 신경 쓰는 선배가 개발을 알려준다는 느낌이 들었습니다.

레이아웃 꿀팁!

책의 구성은 단계식으로 학습할 수 있도록 되어 있다고 생각하고 Next.js를 처음 사용하게 되거나, 혹은 오래전에 사용해 보고 최근에는 사용하지 않아서 다시 한번 개념을 익혀야 하는 상황에 적합한 책이라고 생각합니다. 꼭 필요한 개념들을 간결하게 설명해 주시고 알아두면 좋은 내부 동작이나 실무 활용 팁들도 볼드 처리로 강조되어 있어서 저도 모르는 내용을 알게 되는 재미가 있었습니다.

그리고 결국에 개발은 이론적인 지식에만 머물러서는 한계가 있기 때문에 꼭 무언가를 만들어보는 과정이 필요하다고 생각하는데요. 바로 내가 만들고 싶은 제품을 만들어봐도 좋겠지만, 그전에 한번 간단한 토이프로젝트를 해보고 싶은 분을 위해서 책의 마지막에는 미니 프로젝트 챕터가 존재합니다. 여기서는 직접 데이터베이스도 설계하고 API를 개발하기 위해 ORM도 사용해 보며 최종적으로는 서비스를 배포까지 진행하는 하나의 웹서비스를 만드는 플로우를 진행해 볼 수 있습니다. 이다음에 실제로 회사에서 Next.js로 개발을 하거나 내가 개인적으로 만들고 싶은 제품을 만드는 흐름으로 넘어가면 도움이 많이 될 것이라고 생각합니다.

"한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 협찬 받아 작성된 서평입니다."

이번에 리뷰할 서적은 한빛미디어에서 출판된 『소문난 명강의 소플의 처음 만난 Next.js』입니다.
이 책은 Next.js를 처음 접하는 개발자들을 위한 입문서로, React에 대한 기본적인 이해가 있는 독자에게 적합합니다. 
웹 개발 경험이 있으면서 최신 프론트엔드 프레임워크를 학습하고자 하는 개발자들에게 특히 유용합니다.

* 주요 강점

1. 체계적인 학습 구조 : 책은 매우 논리적인 순서로 구성되어 있습니다. 기본 개념부터 시작해서 점진적으로 복잡한 주제로 넘어가는 구조가 인상적입니다.
- 0장에서 개발 환경 설정
- 1장에서 Next.js의 핵심 개념 소개
- 2-15장에서 각 기능별 상세 설명
- 16장에서 실제 프로젝트 구현

2. 이론과 실습의 균형: 각 장마다 이론 설명과 실습이 적절히 조합되어 있어 학습 효과가 높습니다. 
-  16장의 미니 커뮤니티 프로젝트는 앞서 배운 내용들을 종합적으로 활용할 수 있는 좋은 기회를 제공

3. 최신 기술 스택 반영
- App Router와 Pages Router 모두 다룸
- TypeScript 활용
- 최신 데이터 페칭 패턴 (SWR, 서버 액션)
- 현대적인 개발 도구들 (Tailwind CSS, Shadcn UI, Drizzle ORM)

4. 실무 중심적 접근 : 단순한 문법 설명을 넘어서 실제 개발에서 마주할 수 있는 상황들을 다룹니다.
- 캐싱 전략
- 최적화 기법
- 테스트 방법론
- 배포 과정

5. 핵심 개념 커버리지 : Next.js의 핵심 기능들을 빠짐없이 다룹니다
- 라우팅: Pages Router와 App Router의 차이점과 활용법
- 렌더링: CSR, SSR, SSG의 개념과 활용 시나리오
- 데이터 페칭: 다양한 데이터 가져오기 방법론
- 성능 최적화: 이미지, 폰트, 스크립트 최적화

6.실전 프로젝트의 완성도 : 실제 서비스 수준의 기능들을 구현하면서 16장의 미니 커뮤니티 프로젝트는 책의 백미입니다. 
- 인증 시스템 (NextAuth)
- 데이터베이스 연동 (Turso + Drizzle ORM)
- 사용자 인터페이스 (Shadcn UI)
- 배포 과정 (Vercel)

* 학습 효과
1. 초급 → 중급 수준으로의 성장
이 책을 완주하면 Next.js를 사용한 실제 웹 애플리케이션을 구축할 수 있는 실력을 갖추게 됩니다. 
단순한 문법 암기가 아닌 실무 활용 능력을 기를 수 있습니다.

2. 현대적 개발 워크플로우 습득
책에서 다루는 도구들과 방법론은 현재 업계에서 실제로 사용되는 것들입니다. 
따라서 학습 후 바로 실무에 적용할 수 있는 지식을 얻을 수 있습니다.

* 아쉬운 점
1. 진입 장벽 : React에 대한 사전 지식이 필요하므로 완전 초심자에게는 다소 어려울 수 있습니다.

2. 깊이 vs 폭 : 광범위한 내용을 다루다 보니 일부 고급 주제는 상대적으로 얕게 다뤄진 감이 있습니다.

3. 버전 의존성 : 빠르게 발전하는 Next.js 생태계 특성상 시간이 지나면서 일부 내용이 outdated될 가능성이 있습니다.

* 총평

"소플의 처음 만난 Next.js"는 Next.js 학습을 위한 탁월한 가이드북입니다. 
저자의 풍부한 경험이 잘 녹아있으며, 특히 실습 중심의 구성이 매우 효과적입니다. 
이론적 배경을 충실히 설명하면서도 실무에서 바로 활용할 수 있는 실용적인 지식을 제공합니다. 
16장의 종합 프로젝트는 앞서 배운 모든 내용을 통합하여 실제 애플리케이션을 만들어보는 소중한 경험을 제공합니다.

* 추천 대상
- React 기초를 알고 있는 프론트엔드 개발자
- Next.js로 실제 프로젝트를 진행하려는 개발자
- 최신 웹 개발 트렌드를 학습하고 싶은 개발자
- 풀스택 개발 역량을 기르고 싶은 개발자

Next.js를 체계적으로 학습하고 싶다면 이 책을 강력히 추천합니다. 
단순히 문법을 배우는 것을 넘어서 실제 서비스를 만들 수 있는 실력을 기를 수 있는 훌륭한 교재입니다.

처음에 프론트엔드 개발을 시작하려고 하면 진짜 막막한 순간이 와요. “어디서부터 뭘 공부해야 하지?” 이런 고민이 머릿속을 가득 채우죠. 저도 Next.js라는 프레임워크를 처음 접했을 때는 구조도 낯설고 CSR, SSR, SSG 같은 말들이 너무 어려워서 겁부터 났습니다. 근데 '소플의 처음 만난 Next.js'라는 책을 보면서 그 막막함이 차츰 사라졌어요. 이 책은 그냥 따라 치는 식의 실습서가 아니라, 왜 이런 구조로 코드를 짜야 하는지, 또 왜 이런 아키텍처가 필요한지를 납득할 수 있게 설명해줍니다. 덕분에 단순 암기가 아니라 이해하면서 배울 수 있었고, 실무에서도 바로 써먹을 수 있는 감각이 길러졌습니다.

​

특히 CSR, SSR, SSG 같은 렌더링 방식을 비교해주면서 각각의 장단점을 차근차근 풀어주는 부분이 인상 깊었어요. 보통 입문자가 제일 헷갈려 하는 게 바로 이 부분인데, 이 책은 그림과 예시, 그리고 실습을 통해 자연스럽게 이해할 수 있게 도와줍니다. 그래서 “아, 이래서 Next.js가 필요하구나” 하고 확실히 느낄 수 있었죠. 단순히 ‘이렇게 하세요’가 아니라 “왜 이렇게 해야 하는가”를 계속 짚어주니까 머릿속에 오래 남습니다.

​

라우터 부분도 큰 도움이 됐어요. 페이지스 라우터와 앱 라우터가 어떻게 다른지, 실제 프로젝트 구조로 보여주면서 설명해주니까 훨씬 이해가 빨랐습니다. 단순히 라우팅 코드를 배우는 게 아니라 웹 애플리케이션 전체 구조를 설계하는 시각으로 접근할 수 있게 해주더라고요. 실습을 따라가다 보면 어느새 시스템을 설계하는 눈까지 조금씩 뜨이는 기분이었습니다.

​

책의 진행 방식도 마음에 들었어요. VS Code 설치, Node.js 설치 같은 기본적인 준비부터 시작해서 타입스크립트 기초 문법까지 차근차근 알려줍니다. 그래서 완전 초보자도 쉽게 따라갈 수 있어요. 중간중간 요약 정리가 되어 있어서 복습하기도 좋았고, 필요한 부분만 쏙쏙 찾아볼 수도 있어서 실용적이었습니다.

​

무엇보다 이 책은 친절하면서도 체계적이에요. 그래서 모르는 걸 알게 될 때 ‘아! 이런 거였구나’ 하고 깨닫는 재미가 큽니다. 혼자 독학하다 보면 어려운 개념은 그냥 외워버리기 일쑤인데, 이 책은 납득할 수 있는 방식으로 알려주니까 이해가 깊어지고 오래 기억에 남습니다.

​

Next.js는 지금 프론트엔드 개발자라면 꼭 알아야 하는 기본 프레임워크예요. 그런데 구조와 렌더링 방식 때문에 처음에는 누구나 부담을 느낄 수 있습니다. 이 책은 바로 그 부담을 덜어주고, 재미있고 실전감 있게 Next.js를 배울 수 있도록 안내해줍니다. 단순 입문서가 아니라, 진짜 개발자로 성장하는 데 필요한 길잡이 같은 책이에요. 그래서 저는 이 책을 프론트엔드를 처음 배우는 분들뿐만 아니라, 한 단계 더 성장하고 싶은 모든 웹 개발자에게 자신 있게 추천하고 싶습니다.

“한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 협찬 받아 작성된 서평입니다.”

들어가며

웹개발, 특히 프론트엔드 분야에 계신 분들이라면 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를 다루는 책도 있는 걸로 알고 있어요.

관심이 있으시다면 읽어보셔도 좋을 것 같습니다.

[ 한빛미디어 서평단 '나는 리뷰어다' 활동을 위해서 전자책을 협찬 받아 작성된 서평입니다. ]

- 읽어보니?

 Next.js 는 작년부터 관심이 많이 갔었다. 원래 리액트를 배우기 시작하고, 프론트엔드쪽 프레임워크와 라이브러리를 배우면서 이름은 한번씩 들어봤지만 스벨트를 제외하곤 Next.js 는 쳐다도 보지 않고 있었는데, 오랜만에 방문한 모교 후배들이 Next.js를 사용해서 프로젝트를 시작했다는 소리를 듣고 깜짝 놀랐다.

Q. Next.js? 그걸 왜 써?

A. 쉬워서요.

 교수님께 여쭤보았지만 커리큘럼에는 들어있지도 않은 기술이라고 했다. 어디서 이걸 듣고 시작했을까? 엄청난 능력을 갖고 있어서 재능이 빛을 보는 그런 후배는 없던걸로 보아 뭔가는 해야했기에 유튜브를 보고 프로젝트를 따라하다보니 Next.js 였다거나... 아니면 AI가 추천해줬다거나 하는 킹능성을 생각해볼 수 있을 것 같다.

 뭐 아무튼, 뭘로 시작하던간에 일단 해보고 재미를 붙이는게 좋지 않나 라는 생각을 갖고 있었고, 생각보다 컨셉을 잘 갖춘 프로젝트를 진행하고 있었기에 꽤나 놀라웠던 기억이 있었다.

그렇게 관심을 갖게 되었고, 어찌저찌 먼저 공부하던 다른 기술들을 정리하고 나니 기회가 되어 Next.js를 만지게 되었다.

첫 인상은 상당히 깔끔하다. 말로 한번, 그림으로 한번 뭘 배울지 알려준다

 책 초반에는 다른 책들과 다르지 않게 책에서 다룰 기술이 어떻게 탄생했는지와 관련된 내용들을 알려주는데, 리액트 기반의 프레임워크 라는 말에 리액트를 먼저 해본것이 많은 도움이 되겠다 싶었다. 리액트를 해본 분들이라면 쉽게 접할 수 있지 않을까 싶다.

장 초반과 마찬가지로 장의 마지막도 깔끔하게 정리되어 있어서 마음에 든다.

책들마다 똑같은 내용을 다루더라도 저자의 생각에 따라 구성이 다르고 설명이 다르고 느낌이 다른데, 이 책은 simple is best의 느낌일까? 정말 깔끔하면서도 눈에 확 들어오는 구성을 갖추고 있다. 퀴즈 같은것을 둬서 배운 것을 한번 더 확인하게 하는 것도 좋지만, 심플하게 뭘 배웠는지 한 눈에 확인하게 하는 것도 상당히 괜찮은 것 같다고 느꼈다.

챕터3의 index

챕터 2부터는 실습이 나온다. 보고 따라만 하면 되기 때문에 실습에 무리가 없을 것으로 보이고, 장 초반에는 실습이라면 '실습' 타이틀이 달려있어 구분이 쉽고 디자인이 참 깔끔하다 라고 다시 한 번 생각하게 된다.

챕터3의 어떤 페이지

 챕터 2부터 실습이 나오면서, 위와 같이 코드, 실제 코딩 화면, 결과물 등으로 구성되어 설명을 이어가는데 여기서 굉장한 단점이 나온다. 내가 찾지 못한 것일지도 모르지만, 코드와 실습 결과는 확인하기 쉬운 반면, 실제 코딩 화면은 확인하기가 어렵다.

 다른 전자책도 그런지 모르겠지만, 일단 PC에서 보고 있는데 뷰어에서 200%로 확대를 하면 이미지가 깨져버린다.

브라우저의 확대 기능을 이용하면 확대가 되지 않고... 참 난감한 순간이었다.

Q. 코드가 별도로 작성되어 있다면 실제 화면은 안봐도 상관없지 않나?
A. 맞다. 근데 문제는 아래 이미지들 처럼 로그나 화면에 출력되는 속성, 요소 같은 것을 보고 싶을 때가 문제이다.

그리고 코드가 전체 코드의 어디쯤에 위치했는지도, 혹~시라도 저자가 오타를 내서 비교를 해야할 때 등등... 실제 화면은 도움이 될때가 많기 때문이다.

실제로 터미널을 활용하는 곳들은 별도로 보여줌

정말 중요한 로그 또는 터미널 내용이라면 따로 결과를 알려주거나 하지만, 그렇다면 실제 코드 이미지를 넣은 의미가 없지 않을까 싶다.

확대하면 깨져버렷!

- 정리하자면...

위에서부터 계속 이야기 하지만 깔끔한 구성에 잘 정리되어있는 좋은 입문서라고 생각한다.

대상 독자

 애초에 대상 독자가 초급으로 설정되어 있는 입문서 이기 때문에 쉬워야 하는것은 당연할지도 모른다.

 하지만 쉬워야 하는것도 책들마다 다 다르게 생각하고 있다고 느낀게, 어디는 브라우저에서 어디를 들어가서 뭐를 설치하고 어떻게 설치해서 이것부터 깔고 저거하고 밥을 떠 먹여 주는것처럼 구성된 책이 있는가 하면, 모든 경우의 수를 생각하는 것 처럼 windows와 mac의 설치 방법이 다르니 이걸 이렇게 하고 오류도 이런게 나오면 이렇게하고... 모든 환경의 사용자를 위해서 엄청 복잡하게 구성된 경우도 있다.

 그리고 이 책처럼 정말 심플하게 모든 플랫폼에서 사용 가능한 vscode를 사용해서 '간단한 터미널 명령어를 통해 앱을 구성한다.' 와 같이 정말 심플하게 구성된 책들도 존재한다.

 정~말 아무것도 모르는, 프로그래밍을 처음 배운 사용자라면 복잡하게 구성된 하나하나 따라하며 진행하는 내용이 도움이 될 수 있겠지만, 'Next.js' 를 배운다고 하는 사람이라면 애초에 경력이 1년이던, 6개월이던 있는 사람이라고 생각이 된다. 이 책은 그것을 생각해서 이렇게 심플하게 구성하지 않았나 싶다. 그리고 이런쪽이 좀 더 마음이 간다. 하나하나 다 떠먹여 주는 것 보단 일단 해보고 안되면 찾아보고 해결하고, 그 모든 것이 나에게 다 도움이 되고 성장하는 길이 아닐까?

목차 왜이뤱...

목차가 제대로 정리가 안되어있는건 아쉽다. 전자책 업로드 시 문제가 있던건지 아니면 여기만 그런건지 모르겠는데 아래 네비게이션을 이용하다가 죄다 1장이라서 뭐지? 싶었다.

 아무튼, 이 책은 간단한 이론부터 시작해서 실습, 그리고 간단한 프로젝트 진행하는 것으로 마무리한다.

 개인적으로는 심플한 구성과 디자인도 마음에 들지만 각 챕터마다 구성된 제목들도 정말 마음에 드는 요소 중 하나라고 생각한다.

 일단 코드부터 쳐보고 보자, 라고 생각하고 프로그래밍 세계에 뛰어들었던 나는 그 뒤로 뭔가 새로운것을 시작할 때면 또 이론보다는 일단 쳐보고 왜 이렇게 굴러가는지 보자 식의 느낌으로 배우게 되는데 이런 식으로 배우고 활용하다보면 이론에 매우 취약하지 않나 라는 생각과 그런 상황을 마주하게 된다.

 '이건 알고 있는데 이걸 뭐라고 해야 할지...' 하면서 검색하기도 힘들고 남들에게 설명하기도 힘들다. 그렇기 때문에 이 책에서 각 챕터로 나뉜 제목의 '라우팅', '미들웨어', '렌더링' 등의 이론들을 배움과 함께 실습까지 진행한다는것은 매우 좋은 구성이 아닐까 싶다.

 위와 같은 의견으로 많은 개발자들이 꼭 Next.js에 관심이 없더라도 이 책을 간단하게 둘러보면서 다양한 곳에 사용되는 컴퓨터 지식을 습득하거나 복습하고, 또 재미를 느낀다면 프로젝트까지 진행해보는것도 좋지 않을까 싶다.

최근에 Next.js를 본격적으로 공부하기 위해 소플의 처음 만난 Next.js를 읽었다.

평소 리액트를 사용하면서도 “서버 사이드 렌더링”이나

“정적 사이트 생성(SSG)” 같은 개념은 그냥 글로만 접했을 뿐, 실제로 프로젝트에 어떻게 녹여내야 할지 막막했는데,

이 책이 그런 갈증을 많이 해소해주었다.

​

? 첫인상

책의 가장 큰 장점은 **“입문자 친화적”**이라는 점이다. 이론을 길게 늘어놓기보다, 바로바로 따라 할 수 있는 실습 예제를 중심으로 설명이 이어져서 부담 없이 읽을 수 있었다. 단순히 코드만 나열하는 게 아니라 “왜 이렇게 작성해야 하는지”를 이해할 수 있도록 배경 지식도 함께 풀어주는 게 좋았다.

​

? 배운 점

Next.js의 렌더링 방식 차이: CSR, SSR, SSG, ISR 등 다양한 방식이 각각 어떤 상황에서 쓰이는지 명확히 정리할 수 있었다.

라우팅과 페이지 구조: 리액트 라우터와는 다른, Next.js의 파일 기반 라우팅 방식이 생각보다 직관적이라는 걸 깨달았다.

API Routes: 백엔드 없이 간단한 API 서버를 만들 수 있다는 점이 흥미로웠다. 작은 프로젝트나 프로토타입에 활용하기 좋을 것 같다.

배포 경험: Vercel을 이용한 배포 과정을 실습하면서, “Next.js = 프론트엔드 프레임워크”가 아니라 **“서비스를 완성할 수 있는 풀스택 환경”**이라는 걸 알게 되었다.

​

? 좋았던 점

실습 위주라 지루하지 않다.

코드가 깔끔하게 정리돼 있어서 따라 하기 쉽다.

중간중간 나오는 설명 그림들이 직관적이라 이해가 빠르다.

​

? 아쉬웠던 점

Next.js 버전이 빠르게 업데이트되다 보니, 일부 문법이나 기능은 최신 문서와 비교하면서 공부할 필요가 있었다.

기초 위주의 설명이라, 중급 이상을 원하는 사람에게는 조금 가볍게 느껴질 수도 있다.

​

​

✍️ 총평

처음 Next.js를 접하는 사람에게는 최고의 입문서라고 생각한다. React 경험이 조금 있는 상태에서 읽으면 훨씬 수월하게 이해할 수 있고, 직접 작은 블로그나 토이 프로젝트를 만들어보면서 책을 따라가면 금방 “Next.js로 무언가 만들 수 있다”는 자신감을 얻을 수 있다.

나도 책을 읽고 나서, 블로그 클론 프로젝트를 직접 만들어봤는데 확실히 “서비스 개발”에 한 발짝 다가선 기분이 든다.

앞으로는 이 책에서 배운 내용을 기반으로, **Next.js의 심화 기능(서버 액션, App Router, 데이터 캐싱 등)**도 공부해보고 싶다.

서평단 활동을 하던 중, 마침 딱 필요했던 Next.js 관련 도서를 받게 됐다.
최근에 JavaScript 복습을 끝내고 React를 본격적으로 공부하고 있었는데, 사이드 프로젝트는 Next.js로 진행하고 있어서 이 책이 실질적으로 굉장히 도움이 됐다.

IT 책을 고를 때 은근히 신경 쓰이는 게 책의 두께다.

너무 얇으면 ‘이거 내용이 제대로 들어있을까?’ 싶고, 너무 두꺼우면 ‘이걸 언제 다 보지…’ 하면서 손이 잘 안 간다.

그런데 이 책은 딱 적당한 두께라서 부담스럽지 않으면서도, 필요한 내용이 빠짐없이 들어 있어서 만족스러웠다.

책의 구성 및 핵심 내용

Next.js 핵심 기술 부터 차근차근 짚어준다. 

특히 면접에서 자주 나오는 주제들이 정리돼 있어서, 단순히 따라 치는 공부가 아니라 실제 면접 대비에도 도움이 될 만했다.

한 챕터 안에 개념 설명과 실습이 같이 있어서, 개념으로 공부하고 실습으로 복습하기 좋은 구조였다.

공부할 때 ‘아, 이거 이론만 봐서는 잘 모르겠다’ 싶은 경우가 많은데, 이 책은 그런 갈증을 바로 해소해줬다.

그리고 환경 셋팅 부분도 꼼꼼하게 다뤄준다.

사실 어떤 기술이든 처음 환경 셋팅이 가장 막히기 쉬운 부분인데, 이 책은 아주 기초적인 부분부터 차근차근 설명해주기 때문에 입문자도 무리 없이 따라갈 수 있을 것 같았다.

마지막 챕터에는 실습이 몰려 있는데, 지금까지 배운 개념들을 총정리하듯 복습할 수 있는 장이라 꽤 만족스러웠다.

가장 좋았던 건 환경 변수 설정 파트였다.

프로젝트를 진행할 때마다 환경 변수를 대충 감으로만 써왔는데, 늘 ‘이게 제대로 쓰고 있는 건가?’ 하는 의문이 있었다.

이 책을 통해 환경 변수를 어떻게 안전하고 효율적으로 관리할 수 있는지 확실히 배울 수 있었던 게 큰 수확이었다.

또 하나는 프론트엔드 테스트 관련 챕터였다.

요즘 Jest와 React Testing Library를 조금씩 사용해보고 있어서, 책에 관련된 내용이 나온 게 반가웠다. 단순히 “테스트는 필요하다”라는 얘기만 하는 게 아니라, 실제로 어떤 방식으로 적용할 수 있는지도 다뤄줘서 도움이 됐다.

개인적인 감상과 추천 대상

책을 다 읽고 나서 느낀 건, 이 책은 단순히 ‘개념만 죽 나열하는 책’도 아니고, 그렇다고 무작정 따라 치기만 하는 실습서도 아니라는 점이다. 개념과 실습이 균형 있게 배치돼 있어서 자연스럽게 이해가 잘 된다.

또 Next.js 기술만 다루는 게 아니라 CSS 관련 기술, 성능 최적화, 환경 설정 같은 프론트엔드 전반에 도움이 될 만한 내용이 들어 있어서 프론트엔드 전반을 넓게 이해하는 데에도 도움 되는 책이라고 느꼈다.

그래서 추천하고 싶은 대상은 분명하다.

• Next.js를 처음 공부하는 입문자 → 환경 셋팅부터 기초 개념, 실습까지 따라가기 좋다.
• 한 번 공부했지만 흐릿하게만 알고 있는 사람 → 전체 개념을 다시 정리하고 싶을 때 유용하다.
• Next.js 관련 면접 준비를 하고 있는 사람 → 핵심 개념이 잘 정리돼 있어서 대비하기 좋다.

"한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 협찬 받아 작성된 서평입니다."

총평

- 책의 난이도  : ★★☆☆☆
- 추천 별점     : ★★★★★
- 추천 독자     : 혼자서 리액트 기반의 풀스택 개발을 처음부터 끝까지 해보고 싶은 사람 누구나!
- 지은이         : 이인제 (소플) 지음
- 출판사         : 한빛미디어
 

프론트엔드 개발을 공부하다 보면 반드시 부딪히는 이름이 있습니다. 바로 Next.js입니다.

리액트만으로도 충분히 멋진 웹앱을 만들 수 있는데, 왜 Next.js가 필요할까요?

그 이유는 실무에서 요구하는 수준이 점점 더 높아졌기 때문입니다.

검색 엔진 최적화(SEO), 빠른 페이지 로딩, 다양한 렌더링 방식(CSR, SSR, SSG), 서버와의 긴밀한 연동까지.

이런 것들을 리액트만으로는 모두 해결하기 어렵습니다. 그래서 나온 것이 리액트 기반 풀스택 프레임워크 Next.js입니다.

그동안 리액트만 해봤던 분들에게는 CSR, SSR, SSG, 앱 라우터, 서버 액션 같은 용어가 처음에는 다소 낯설 수 있습니다.

* 이 책은  Next.js 15, 리액트 19버전을 기반으로 작성되었습니다. 그리고 책 자체에서 다양한 실습을 통해서 책만으로도 풀스택 애플리케이션을 처음부터 끝까지 만들어볼수있다는 장점이 있습니다.

책의 특징

1. 실습 기반 학습

특히 이 책은 실습이 정말 많아서 좋았습니다. 거의 모든 내용에 대해서 실습이 존재합니다.

아래 내용도 실제로 제가 페이지를 만들면서 엄청 고생했던 부분입니다.

OG를 넣으면 링크를 보낼때 섬네일을 보낼 수 있는데요. 인프런이나 유튜브 같이 각 강의별로 동적으로 OG 페이지를 생성하려면 결국은 서버사이드 랜더링을 진행해야합니다.

안그러면 그냥 html에 설정한 기본 값만 계속해서 발생합니다. 

2. 점진적인 난이도 상승

초반에는 환경 세팅 → 기본 페이지 만들기 → 라우팅 개념, 이렇게 가볍게 시작합니다.
중반부터는 데이터 페칭, 렌더링 방식, 캐싱 최적화 같은 실무 핵심 개념이 나오고, 후반부에는 미니 프로젝트로 배운 내용을 총정리합니다.
완벽한 구성입니다.

3. 프론트앤드와 개발에 대한 전반적인 지식 설명

책을 그냥 정독하다보면 자연스럽게 내용이 익혀집니다. 개념에 대해서 잘 설명하고 있기 때문에 어렵지 않게 읽을 수 있는데, 읽다보면 내용이 이해되는 마법을 겪을 수 있습니다.

챕터별 흐름 정리

책의 전체 흐름을 간단히 요약해보면 이렇습니다.

0장 ~ 2장 (준비하기 & 시작하기)

여기서 Next.js는 리액트의 확장판이라는 큰 그림을 잡게 됩니다.

타입스크립트, Node.js, VS Code 설치부터 시작해 Next.js의 기본 구조와 작동 원리를 다집니다.

3장 ~ 5장 (라우팅 & API)

라우팅은 웹 개발에 있어 필수적입니다. 우리가 A, B 항목으로 이동할 때 라우터가 없으면 이동이 안되거든요.

페이지 라우터와 앱 라우터를 비교하면서 최신 방식(앱 라우터)을 중심으로 배우고, API 라우트/라우트 핸들러까지 익히게 됩니다.

6장 ~ 10장 (실무 핵심: 데이터, 렌더링, 캐싱)

이 부분이 아무래도 고난이도 파트가 아닐까 싶습니다. 하지만 가장 실무에서 많이 사용되고 중요한 영역이므로 꼭 여러 번 반복해서 정리해야 합니다.

데이터 페칭(fetch, 서버 액션), SWR, 서버 컴포넌트와 클라이언트 컴포넌트, 캐싱까지 개념을 알고 실습을 통해 어떻게 구성되는지 확인합니다.

11장 ~ 14장 (스타일링 & 최적화 & 테스트)

이 부분을 통해서 실제 서비스 수준의 완성도를 구현할 수 있습니다.

Tailwind, CSS-in-JS, Sass 등 다양한 스타일링 기법을 다루고, 이미지/폰트 최적화, 테스트(Jest, Playwright)까지 다룹니다.

15장 ~ 16장 (빌드 & 배포, 미니 프로젝트)

댓글 기능, 인증, DB 연동, API 라우트 구현, SWR까지 적용하고, Vercel 배포로 마무리하여 

마지막으로 Next.js 앱을 빌드하고, 미니 커뮤니티 사이트 프로젝트를 직접 만듭니다.

이처럼 책 한권을 읽으면 미니 프로젝트까지 만들어볼 수 있습니다. 

마무리

Next.js는 이제 선택이 아니라 실무 필수 기술입니다.

이 책은 단순히 “입문서”라고 하기에는 너무 알차고, 한 권을 끝내면 진짜로 실무에 투입할 수 있는 풀스택 개발 능력을 갖출 수 있습니다.

리액트 경험이 있는 분들이라면, 꼭 이 책으로 Next.js를 제대로 배워보시길 강력히 추천드립니다!!

IT 현업개발자가, 별도의 광고료 없이 한빛미디어의 책만 제공받아서 작성한 서평입니다.

React.js 개발 경험이 있는 분들이라면, 개념 및 내용설명을 빠르게 이해하실 수 있으실 정도로 초보자 눈높이에 맞춰서 쉽게 내용을 설명한 책 입니다. 이 책의 최대장점은 컴포넌트의 구성내용을 개발자의 PC 에서 동작중인 vs code 개발 환경을 쌩으로 보여줌으로써, 어떻게 작업폴더와, 각각의 파일들을 어떻게 나누고 이들을 취합하여 작업을 진행하면 되는지 생생하게 보여주는 점이 이 책의 큰 장점 입니다.

입문자를 위한 최신 Next.js 를 찾고 있다면 이 책을 추천한다

Next.js 15 버전 기반의 완전 실습 위주로 구성된 책이라 입문자가 따라하며 습득하기 매우 좋고

책을 보고 따라하기 어려우면 강의도 있으니 쉽고 빠르게 Next.js 를 익힐 수 있다