1장: Next.js 소개

• Next.js가 무엇인가요?
  • Next.js 및 해당 기능의 개요
  • 다른 프레임워크 대신 Next.js를 선택하는 이유는 무엇인가요?
  • Next.js의 실제 애플리케이션
• 전제조건
  • JavaScript, React, Node.js에 대한 기본 지식
  • 필수 소프트웨어(Node.js, npm/yarn).
  • 개발 환경 설정(VS Code 또는 선호하는 편집기).

2장: Next.js 프로젝트 설정

• Next.js 설치
  • npx create-next-app을 사용하여 새로운 Next.js 프로젝트를 생성합니다.
  • 디렉토리 구조 개요.
  • Next.js와 함께 TypeScript 사용
• 파일 구조 이해
  • 페이지 디렉토리 및 라우팅 시스템.
  • 정적 자산을 위한 공개 디렉토리.
  • 백엔드 경로용 API 디렉터리.

3장: 첫 페이지 만들기

• 페이지 만들기
  • 페이지 폴더를 소개합니다.
  • 페이지 생성 및 연결.
  • 다음/링크로 페이지 간을 탐색합니다.
• 동적 라우팅
  • [param]을 사용하여 동적 경로를 생성합니다.
  • 중첩 라우팅 및 사용 사례.
• 사전 렌더링 이해
  • 정적 생성과 서버 측 렌더링.
  • getStaticProps 및 getServerSideProps를 사용하는 방법.

4장: Next.js의 스타일링

• CSS 모듈
  • 범위 지정 스타일에 CSS 모듈을 사용하는 방법
  • 전역 CSS를 관리합니다.
• 스타일이 지정된 구성요소
  • Next.js에서 스타일이 지정된 구성요소 설정
  • 테마 관리.
• Next.js와 함께 Sass 사용
  • Sass 설치 및 구성
  • Next.js 프로젝트에서 Sass를 사용하기 위한 모범 사례.

5장: Next.js에서 데이터 가져오기

• 클라이언트측 데이터 가져오기
  • 가져오기 및 axios를 사용하여 구성 요소의 데이터를 가져옵니다.
• 서버측 데이터 가져오기
  • 서버측 렌더링을 위해 getServerSideProps를 사용합니다.
• 정적 데이터 가져오기
  • 정적 생성을 위해 getStaticProps 및 getStaticPaths를 사용합니다.
  • 동적 콘텐츠를 위한 ISR(증분 정적 재생성).

6장: Next.js의 API 경로

• API 경로 생성
  • API 디렉토리 개요
  • 간단한 RESTful API를 생성합니다.
• API 요청 처리
  • 요청 및 응답 개체를 이해합니다.
  • 오류 처리 및 응답 코드.

7장: CMS와 함께 Next.js 사용

• CMS 설정
  • Next.js와 함께 CMS를 사용하는 이유는 무엇인가요?
  • 인기 있는 CMS 옵션(WordPress, Contentful, Sanity 등)과 통합됩니다.
• Next.js에서 CMS 데이터 가져오기
  • CMS를 Next.js에 연결하는 방법
  • CMS로 동적 콘텐츠를 관리합니다.

8장: Next.js와 인증

• 인증 구현
  • Next.js의 인증 전략.
  • JWT 토큰, 쿠키 및 세션 관리를 사용합니다.
• 제3자 인증
  • OAuth 공급자 설정(Google, GitHub).
  • 인증을 위해 NextAuth.js와 같은 라이브러리를 사용합니다.

9장: 성능 최적화

• 이미지 최적화
  • 최적화된 이미지를 위해 Next.js 이미지 구성요소를 사용합니다.
  • 지연 로딩 이미지.
• 스크립트 최적화
  • Next.js 스크립트 구성요소 이해
  • 비동기 스크립트 로딩을 연기합니다.
• 코드 분할 및 지연 로딩
  • Next.js가 코드 분할을 자동으로 처리하는 방법
  • 더 나은 성능을 위해 동적 가져오기를 구현합니다.

10장: Next.js의 SEO

• Next.js의 SEO 이해
  • Next.js 애플리케이션에 대한 SEO의 중요성.
• 메타 태그 및 오픈 그래프
  • SEO 태그에 next/head를 사용합니다.
  • 오픈 그래프 및 Twitter 카드 태그를 설정합니다.
• 사이트맵 및 Robots.txt 생성
  • 동적 사이트맵을 만드는 중입니다.
  • 크롤러에 robots.txt를 사용합니다.

11장: Next.js 배포

• 배포 플랫폼
  • Vercel: Next.js에 권장되는 플랫폼입니다.
  • 기타 플랫폼: AWS, Netlify 및 DigitalOcean.
• Vercel에 배포
  • Vercel에 앱을 배포하기 위한 단계별 가이드입니다.
• 프로덕션 구성
  • Next.js의 환경 변수.
  • 프로덕션에 바로 사용 가능한 Next.js 앱 모범 사례

12장: 고급 구성 및 사용자 정의

• Webpack 구성 사용자 정의
  • 고급 구성을 위해 next.config.js를 사용합니다.
  • 사용자 정의 Webpack 로더 및 플러그인을 추가합니다.
• 사용자 정의 서버
  • 맞춤형 서버를 사용해야 하는 경우.
  • Express를 사용하여 사용자 정의 서버를 구현합니다.

13장: Next.js의 상태 관리

• 상태 관리 소개
  • Next.js에서 상태 관리를 사용해야 하는 시기와 이유.
  • 상태 관리 옵션(React Context, Redux, Recoil, Zustand).
• React Context API 사용
  • React Context로 전역 상태 설정
  • 구성 요소 간에 상태를 전달합니다.
• Redux를 Next.js와 통합
  • Next.js로 Redux 설정
  • 서버 측 및 클라이언트 측 환경에서 상태를 처리합니다.

14장: Next.js에서 테스트

• Next.js 애플리케이션을 테스트하는 이유는 무엇입니까?
  • 테스트의 중요성과 다양한 테스트 유형
  • 테스트 도구 개요(Jest, React Testing Library, Cypress).
• Jest를 사용한 단위 테스트
  • Next.js 프로젝트에서 Jest를 설정합니다.
  • 구성요소 및 유틸리티 기능에 대한 단위 테스트를 작성합니다.
• React 테스트 라이브러리를 사용한 통합 테스트
  • React 테스트 라이브러리를 사용하여 구성 요소 및 페이지를 테스트합니다.
  • 모의 데이터 가져오기 및 API 호출.

결론

• 최종 생각
  • 주요 시사점 요약
  • 추가 학습을 위한 리소스.
  • 독자들이 Next.js를 탐색하고 실험하도록 장려합니다.

더 깊이 있는 학습을 원하시면 여기에서 여정을 계속하세요.