실전에서 바로 쓰는 Next.js : SSR부터 SEO, 배포까지 확장성 높은 풀스택 서비스 구축 가이드

미셸리바

저자:미셸리바
이탈리아밀라노에서구글개발자이자소프트웨어아키텍트로일해온열정넘치는개발자입니다.수년간많은오픈소스프로젝트에기여했으며Haskell,Elixir,Go,타입스크립트등다양한프로그래밍언어를사용합니다.또한여러가지주제로글을쓰고있으며많은국제콘퍼런스에서연사로활동하고있습니다.책을쓰는동안에는파라마운트글로벌아키텍처팀에서시니어소프트웨어엔지니어로근무하며스트리밍웹사이트의핵심인멀티테넌트Node.js애플리케이션을개발했습니다.현재는아일랜드트라모레에있는소프트웨어회사NearForm에서시니어소프트웨어아키텍트로일하고있습니다.

역자:박수현
홍익대학교컴퓨터공학과에서박사학위를받았으며현재는SK텔레콤에서개발자로일하고있습니다.커널,시스템,클라우드컴퓨팅,쿠버네티스,웹등다양한개발분야에관심을가지고있으며,『자바스크립트는왜그모양일까?』(인사이트,2020),『스벨트앤새퍼인액션』(한빛미디어,2021),『클라우드네이티브애플리케이션디자인패턴』(한빛미디어,2022)을번역했습니다.

PART1Next.js의세계로

CHAPTER1Next.js알아보기
1.1준비하기
1.2Next.js란?
1.3Next.js와비슷한프레임워크
1.4왜Next.js일까?
1.5리액트에서Next.js로
1.6Next.js시작하기
프로젝트기존구조
타입스크립트지원
바벨와웹팩설정커스터마이징
정리하기

CHAPTER2렌더링전략
2.1서버사이드렌더링(SSR)
2.2클라이언트사이드렌더링(CSR)
React.useEffect훅
process.browser변수
동적컴포넌트로딩
2.3정적사이트생성(SSG)
정리하기

CHAPTER3Next.js기초와내장컴포넌트
3.1라우팅시스템
페이지에서경로매개변수사용하기
컴포넌트에서경로매개변수사용하기
클라이언트에서의내비게이션
3.2정적자원제공
자동이미지최적화
외부서비스를통한자동이미지최적화
3.3메타데이터
공통메타태그그룹
3.4_app.js와_document.js페이지커스터마이징
_app.js페이지
_document.js페이지
정리하기

PART2Next.js실전감각익히기

CHAPTER4코드구성과데이터불러오기
4.1디렉터리구조구성
컴포넌트구성
유틸리티구성
정적자원구성
스타일파일구성
lib파일구성
4.2데이터불러오기
서버가데이터불러오기
서버에서RESTAPI사용하기
클라이언트가데이터불러오기
클라이언트에서RESTAPI사용하기
GraphQLAPI사용하기
정리하기

CHAPTER5지역및전역상태관리
5.1지역상태관리
5.2전역상태관리
콘텍스트API
Redux
정리하기

CHAPTER6CSS와내장스타일링메서드
6.1StyledJSX
6.2CSSModule
6.3SASS
정리하기

CHAPTER7UI프레임워크
7.1UI라이브러리
7.2ChakraUI
7.3TailwindCSS
7.4HeadlessUI
정리하기

CHAPTER8커스텀서버
8.1커스텀서버가필요한경우
8.2Express.js서버
8.3Fastify서버
정리하기

CHAPTER9테스트
9.1테스트란?
9.2Jest를사용한단위테스트와통합테스트
9.3Cypress를사용한엔드투엔드테스트
정리하기

CHAPTER10SEO와성능관리
10.1SEO와성능
10.2SEO와성능관점에서의렌더링전략
실제웹사이트를통해살펴본렌더링전략의선택이유
사진세부정보페이지
프라이빗라우트
선택한렌더링전략정리
10.3SEO다루기
10.4성능다루기
정리하기

CHAPTER11배포플랫폼
11.1다양한배포플랫폼
11.2Vercel에배포하기
11.3CDN에정적사이트배포하기
11.4적절한CDN고르기
11.5아무서버에나Next.js배포하기
11.6도커컨테이너에서Next.js애플리케이션실행하기
정리하기

PART3Next.js로상용애플리케이션만들기

CHAPTER12인증과사용자세션관리
12.1인증과사용자세션
12.2JSONwebtoken
12.3커스텀인증
12.4Auth0
12.5Auth0커스터마이징
정리하기

CHAPTER13GraphCMS로온라인상거래웹사이트만들기
13.1온라인상거래웹사이트만들기
13.2GraphCMS설정하기
13.3상점홈페이지,장바구니및제품상세페이지만들기
13.4Stripe로결제구현하기
정리하기

CHAPTER14예제프로젝트로살펴보는Next.js의다음단계
14.1무궁무진한가능성을가진프레임워크
14.2Next.js연습을위한프로젝트
스트리밍웹사이트
블로깅플랫폼
실시간채팅웹사이트
14.3다음단계
정리하기

Next.js사용의강점부터최적으로활용하는방법까지!한권으로끝내는올인원가이드

아직도리액트만사용하고있나요?Next.js는리액트와함께사용할때뿐만아니라단독으로사용해도뛰어난성능을보여줍니다.또한리액트에없는여러기능을지원하며설정이나개발옵션등에서도유용한방법을제공합니다.따라서Next.js를사용하면‘빠른’개발과‘빠른’로딩속도라는두마리를토끼를모두잡을수있습니다.

평소리액트만으로웹개발을해왔다면이책을통해Next.js의다양한기능을익히고바로기존리액트프로젝트에적용해볼수있습니다.특히많은웹개발자가관심을갖는확장성에초점을맞추어실용적인기능을소개하고최신개발방식이적용된테스트및배포방법을설명합니다.Next.js를사용해야하는이유부터핵심기능을사용하는방법까지모두다루기때문에이책한권으로상용수준의서비스를구축하고Next.js개발자로거듭날수있습니다.

대상독자
●Next.js로풀스택애플리케이션을개발하고싶은사람
●기존리액트애플리케이션을개선하고싶은사람
●웹개발실력을레벨업하고싶은사람

주요내용
●Next.js의기본사항과내장컴포넌트소개
●적합한렌더링전략선택법
●API호출과상태관리
●스타일링메서드와UI프레임워크사용법
●테스트전략및성능관리방법
●다양한배포플랫폼에서배포하는방법
●온라인상거래웹사이트구축실습
●스트리밍웹사이트,블로깅플랫폼,실시간채팅웹사이트구축가이드