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

Next.js란?

Next.js는 Vercel이라는 미국의 스타트업이 만든 웹 개발용 메타 프레임워크입니다. Next.js는 리액트를 포함하는 메타 프레임워크로서 리액트의 훌륭한 UI 개발 기능에 더해 페이지 라우팅, 서버 사이드 렌더링 등과 같은 기능을 추가로 제공합니다. Next.js가 제공하는 기능의 다양성, 훌륭한 개발자 경험, 빠른 업데이트 덕분에 어떠한 메타 프레임워크도 오늘날 Next.js만큼 많은 관심과 사랑을 받고 있지 못합니다. 다음은 이 주장을 뒷받침하는 2024년 State of JS의 통계 결과입니다.

메타 프레임워크 사용량 통계(State of JS 2024년 통계자료)

페이지 라우터와 앱 라우터

대다수 웹 개발 프레임워크가 하나의 라우터를 제공하는 반면, Next.js는 페이지 라우터(Page Router)와 앱 라우터(App Router)라는 2가지 버전의 라우터를 제공합니다. 페이지 라우터 버전은 Next.js 초기에 제공된 라우터이지만, 앱 라우터 버전은 22년 10월 Next.js 13 버전에서 처음 공개된 최신 라우터입니다. 앱 라우터를 향한 관심이 뜨겁다 보니 대다수 Next.js 입문자는 과거 버전인 페이지 라우터는 배울 필요가 없다고 판단하고 앱 라우터를 공부하려고 합니다. 앱 라우터는 페이지 라우터의 한계를 극복하기 위해 등장한 기술입니다. 따라서 특정 기능의 경우에는 페이지 라우터를 학습하지 않고는 앱 라우터를 제대로 이해하기 어렵습니다. 결론적으로 Next.js를 배우는 가장 좋은 방법은 페이지 라우터를 먼저 빠르게 살펴본 다음, 신규 버전인 앱 라우터를 차근차근 공부하는 것입니다.

처음 공개되는 순간 – Next Conf 2022.

왜 한 입 크기로 잘라 먹어야 할까?

2023년 4월 <한 입 크기로 잘라 먹는 리액트>가 처음 발간된 이래로 이 책은 서점과 학교 등에서 리액트 입문 교재로 많은 관심과 사랑을 받고 있습니다. 아마도 IT 전문 교재에서는 찾아보기 힘든 친절함과 세밀함이 독자의 요구에 맞았기 때문이 아닐까 생각합니다. ‘한 입 크기로 잘라 먹는’ 시리즈의 특징은 우선 독자 수준에 맞는 프로젝트 예제를 선정하는 일로 시작합니다. 프로젝트 예제는 지나치게 어렵지도 쉽지도 않은데, 그렇다고 실무와 무관한 예제는 거부합니다. <한 입 크기로 잘라 먹는 Next.js> 역시 프로젝트를 만들어 가면서 필요한 Next.js의 기능을 소개합니다. 어떤 기능은 직관적으로 쉽게 이해할 수 있는 기능도 있지만, 어떤 기능은 많은 부분이 연관되어 있어 쉽게 이해하기 어렵습니다. 이때 ‘한 입 크기로 잘라 먹는다’라는 시리즈의 제목처럼 기능을 잘게 쪼개고 상세한 텍스트와 직관적인 도해를 섞어 독자가 납득할 수준으로 소개하는 것이 이 책의 장점입니다. 아무리 복잡한 기능도 쉽게 설명할 수 있다는 필자의 노력 덕분에 독자는 Next.js의 고급 기능에 한 발 더 다가갈 수 있습니다.

도서 조회 사이트, 한입북스 토이 프로젝트

<한 입 크기로 잘라 먹는 Next.js>에서는 한입북스라는 이름으로 도서 조회 사이트를 개발합니다. 인덱스 페이지, 검색 페이지, 도서 상세 페이지를 페이지 라우터 버전과 앱 라우터 버전으로 각각 만들어 봅니다. 페이지 라우터 버전의 특징을 이해함과 동시에 새롭게 출시된 앱 라우터 버전으로 서버 사이트 렌더링 등과 같이 새롭게 추가된 기능까지 함께 다루기 때문에 Next.js를 더 깊이 이해할 수 있습니다. 추가로 백엔드 서버에 등록된 도서 리뷰 데이터를 이용해 도서 리뷰 기능도 함께 추가해 봅니다.