소플의 처음 만난 Next.js (개념은 쉽게, 실습은 탄탄하게! 따라 하며 익히는 Next.js 입문 가이드)

이인제

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

0장준비하기
0.1타입스크립트
0.2(실습)Node.js와npm설치하기
0.3(실습)VSCode설치하기
0.4마치며

1장Next.js소개
1.1리액트와Next.js
1.2CSRvsSSR
1.3SSG
1.4Next.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(실습)동적으로OpenGraph이미지생성하기
4.11마치며

5장라우트핸들러
5.1페이지스라우터의API라우트
5.2앱라우터의라우트핸들러
5.3라우트핸들러사용예시
5.4(실습)라우트핸들러를활용하여API만들어보기
5.5마치며

6장미들웨어
6.1미들웨어란
6.2Next.js의미들웨어
6.3(실습)미들웨어사용해보기
6.4마치며

7장데이터페칭
7.1fetch
7.2서버액션
7.3(실습)서버에서데이터받아오기
7.4(실습)서버액션사용하기
7.5마치며

8장SWR
8.1SWR소개및역할
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.1CSS모듈과글로벌스타일
11.2TailwindCSS
11.3CSS-in-JS
11.4Sass
11.5(실습)TailwindCSS사용하기
11.6마치며

12장최적화
12.1이미지최적화
12.2폰트최적화
12.3스크립트최적화
12.4지연로딩
12.5정적애셋
12.6(실습)이미지최적화적용하기
12.7(실습)폰트최적화적용하기
12.8(실습)지연로딩적용하기
12.9마치며

13장설정하기
13.1next.config.js파일
13.2환경변수설정
13.3(실습)환경변수사용해보기
13.4(실습)Redirect적용하기
13.5(실습)Rewrite적용하기
13.6마치며

14장테스트
14.1프론트엔드테스트종류
14.2Vitest
14.3Jest
14.4Playwright
14.5Cypress
14.6(실습)Jest로테스트하기
14.7(실습)Playwright로테스트하기
14.8마치며

15장빌드와배포
15.1빌드의개념
15.2Next.js애플리케이션빌드
15.3(실습)Next.js애플리케이션빌드해보기
15.4마치며

16장미니프로젝트
16.1미니커뮤니티기획하기
16.2(실습)Next.js애플리케이션생성하기
16.3(실습)폴더구성하기
16.4(실습)페이지생성하기
16.5(실습)라우트구성하기
16.6(실습)ShadcnUI및TailwindCSS연동하기
16.7(실습)데이터베이스설계하기
16.8(실습)Turso데이터베이스생성하기
16.9(실습)DrizzleORM연동및데이터베이스스키마생성
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,VSCode설치부터타입스크립트기초까지,웹개발을처음시작하는독자도무리없이따라올수있도록준비과정을자세히다룬다.

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그리고VSCode를설치하여개발환경을설정한다.이어리액트와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를활용한실전개발역량을자연스럽게체득할수있다.