Next.js 정리 - swkim0128/PARA GitHub Wiki

Next.js 정리 목차

1. Next.js 소개

  • Next.js란 무엇인가
  • Next.js의 특징과 장점
  • Next.js와 CRA(Create React App)의 차이점
  • Next.js 프로젝트 구조

2. Next.js 설치 및 기본 설정

  • Next.js 프로젝트 생성
  • Next.js 기본 디렉터리 구조
  • pages 디렉토리와 라우팅
  • 기본 환경설정 파일 (next.config.js)

3. 파일 기반 라우팅

  • 파일 기반 라우팅의 개념
  • 동적 라우팅 ([param].js)
  • 중첩 라우팅
  • API Routes

4. Pre-rendering과 Data Fetching

  • Pre-rendering이란 무엇인가
  • Static Generation (SG) vs Server-side Rendering (SSR)
  • getStaticProps로 데이터 가져오기 (Static Generation)
  • getServerSideProps로 데이터 가져오기 (Server-side Rendering)
  • getStaticPaths로 동적 경로 생성
  • Incremental Static Regeneration(ISR)

5. API Routes

  • API Routes 개념
  • API Routes 생성 및 사용법
  • 동적 API Routes
  • API Routes에서 데이터베이스 연결하기

6. Next.js에서의 스타일링

  • CSS Modules
  • 글로벌 CSS 사용하기
  • styled-jsx를 이용한 컴포넌트별 스타일링
  • Tailwind CSS와 Next.js 통합
  • Sass(SCSS) 사용하기

7. 이미지 최적화

  • Next.js Image 컴포넌트 사용법 (next/image)
  • 이미지 최적화의 이점
  • Image 컴포넌트 속성들 (layout, quality, placeholder 등)

8. Next.js의 SEO 최적화

  • next/head를 이용한 메타데이터 설정
  • SEO 친화적인 URL 구조
  • Open Graph 및 Twitter 메타 태그 설정
  • Sitemap 및 robots.txt 생성

9. Next.js와 국제화 (i18n)

  • Next.js에서 다국어 지원 설정
  • next.config.js에서 i18n 설정
  • 언어 경로 처리
  • 라이브러리를 이용한 번역 (react-i18next 등)

10. Next.js의 Auth 및 인증 처리

  • 인증 처리 전략
  • JWT를 이용한 인증
  • next-auth를 이용한 간편한 인증 구현
  • OAuth를 통한 소셜 로그인

11. Next.js와 데이터베이스 연동

  • Next.js에서 데이터베이스 연결하기
  • Prisma를 이용한 데이터베이스 ORM
  • MongoDB와 Next.js 연동
  • MySQL/PostgreSQL과 Next.js 연동

12. Next.js에서 상태 관리

  • Context API를 이용한 상태 관리
  • Redux를 이용한 상태 관리
  • Recoil과 Next.js 연동
  • SWR을 이용한 데이터 캐싱과 상태 관리

13. Next.js의 성능 최적화

  • 코드 스플리팅과 Lazy Loading
  • 이미지와 폰트 최적화
  • 서버 측 캐싱 및 정적 파일 제공
  • next/script를 이용한 스크립트 최적화

14. Next.js의 배포

  • Vercel을 이용한 Next.js 배포
  • Netlify를 이용한 배포
  • Docker를 이용한 배포
  • GitHub Actions을 이용한 CI/CD 파이프라인 구성

15. Next.js의 고급 기능

  • 미들웨어(Middleware) 사용법
  • next.config.js 고급 설정
  • Edge Functions
  • 커스텀 서버 구축 (Express, Koa)

16. Next.js와 TypeScript

  • TypeScript를 이용한 Next.js 설정
  • TypeScript로 getStaticProps, getServerSideProps 타입 정의하기
  • 커스텀 훅과 컴포넌트에서의 타입 지정
  • Next.js 프로젝트에서 TypeScript 활용하기

17. Next.js의 테스팅

  • Jest와 React Testing Library를 이용한 테스트
  • getStaticProps, getServerSideProps 테스트하기
  • Cypress를 이용한 E2E 테스트
  • Next.js API Routes 테스트하기

18. PWA(Progressive Web App) 구현

  • Next.js에서 PWA 설정하기
  • Service Worker 설정
  • PWA를 위한 성능 최적화
  • Lighthouse로 PWA 성능 측정
⚠️ **GitHub.com Fallback** ⚠️