React vs Next.js

[yuiseo]

📝 Next.js vs React

📚 주제:
React와 Next.js의 차이를 비교하고, Next.js가 제공하는 주요 기능 및 개념들을 정리합니다.

---

🎯 스터디 목표

• React와 Next.js의 차이점을 이해하고, 각각의 장단점과 사용 사례를 구분할 수 있다.
• Next.js의 주요 개념(SSR, SSG, API Routes 등)을 이해하고 활용 방법을 익힌다.

---

📖 핵심 내용:

1. React와 Next.js의 주요 차이점

항목	React	Next.js
유형	UI 라이브러리	프레임워크
렌더링 방식	CSR만 지원	CSR, SSR, SSG, ISR 모두 지원
라우팅	react-router 필요	파일 기반 라우팅 제공
SEO 최적화	추가 설정 필요	기본 제공 (SSR/SSG)
데이터 패칭	외부 라이브러리 필요	getServerSideProps, getStaticProps 제공
이미지 최적화	직접 구현 필요	next/image 기본 제공
API 통합	별도 백엔드 필요	API Routes 제공
생산성	설정과 구조 정의에 시간 소요	기본 설정으로 바로 시작 가능

---

2. Next.js의 주요 개념 및 특징

(1) 렌더링 방식

Next.js는 다양한 렌더링 방식을 지원하여 페이지 요구사항에 따라 효율적으로 사용할 수 있습니다.

• CSR (Client-Side Rendering): 클라이언트에서 렌더링 (React와 동일).
• SSR (Server-Side Rendering): 서버에서 HTML을 생성 후 클라이언트에 전달.
  • 동적으로 변경되는 데이터에 적합.
• SSG (Static Site Generation): 빌드 시 정적 HTML을 생성.
  • 변하지 않는 콘텐츠에 적합 (예: 블로그, 마케팅 페이지).
• ISR (Incremental Static Regeneration): 정적 페이지를 실시간으로 업데이트 가능.

(2) 파일 기반 라우팅

• Next.js는 디렉토리 구조에 따라 URL 라우팅을 자동으로 설정합니다.
  • pages/index.js → /
  • pages/about.js → /about
• 동적 라우팅도 간단히 구현 가능:

  pages/post/[id].js → /post/1
  

(3) 데이터 패칭

Next.js는 서버와 클라이언트 모두에서 데이터를 패칭할 수 있는 내장 메서드를 제공합니다.

• getStaticProps: 빌드 시 데이터를 가져와 정적 콘텐츠 생성.
• getServerSideProps: 요청 시 데이터를 가져와 서버에서 렌더링.
• getStaticPaths: 동적 정적 페이지를 생성.

(4) API Routes

• Next.js는 간단한 백엔드 API를 구현할 수 있는 기능을 제공합니다.
• 예: /api/hello로 요청 시 API 응답을 제공.

  // pages/api/hello.js
  export default function handler(req, res) {
    res.status(200).json({ message: 'Hello World!' });
  }

(5) 자동 코드 스플리팅

• Next.js는 각 페이지마다 필요한 코드만 로드하여 초기 로딩 속도를 개선합니다.
• dynamic import를 통해 특정 컴포넌트를 필요할 때만 로드:

  import dynamic from 'next/dynamic';
  const HeavyComponent = dynamic(() => import('../components/HeavyComponent'));

(6) 트리 쉐이킹

• 사용되지 않는 코드를 제거하여 번들 크기를 최소화합니다.
• Next.js는 Webpack과 ES6 모듈을 사용해 트리 쉐이킹을 자동으로 처리합니다.

(7) 이미지 최적화

• Next.js는 next/image 컴포넌트를 제공하여 이미지 최적화를 자동으로 처리합니다.
  • Lazy Loading, WebP 포맷 변환, 크기 조정 등을 지원.

---

3. Next.js의 장점

(1) SEO가 중요한 프로젝트

• 서버에서 HTML을 생성(SSR, SSG)하므로 검색 엔진 크롤러가 콘텐츠를 쉽게 인덱싱할 수 있습니다.

(2) 초기 로딩 속도 개선

• Next.js는 코드 스플리팅과 정적 사이트 생성을 통해 초기 로딩 속도를 대폭 개선합니다.

(3) 개발 생산성 향상

• 파일 기반 라우팅, API Routes, 기본 내장된 최적화 기능 덕분에 개발 속도가 빠릅니다.

(4) 유지보수와 확장성

• 표준화된 디렉토리 구조(pages, api, public)로 유지보수가 용이하며, 새로운 기능 추가 시 일관성이 유지됩니다.

---

4. Next.js 프로젝트 구조

my-next-app/
├── pages/                  # 페이지 컴포넌트
│   ├── index.js            # 홈 페이지
│   ├── about.js            # About 페이지
│   ├── api/                # API Routes
│       ├── hello.js        # API 라우트
├── public/                 # 정적 파일 (이미지, 폰트 등)
│   ├── favicon.ico         # 파비콘
│   ├── logo.png            # 로고 이미지
├── components/             # 재사용 가능한 컴포넌트
│   ├── Navbar.js           # 네비게이션 컴포넌트
├── styles/                 # 스타일 파일
│   ├── globals.css         # 글로벌 스타일
│   ├── Home.module.css     # 특정 페이지 스타일
└── next.config.js          # Next.js 설정 파일

---

5. Next.js의 Opinionated 구조가 주는 이점

1. 표준화된 디렉토리 구조:
   • 파일 위치만으로도 역할과 용도가 명확해짐.
   • 유지보수 및 협업 시 디렉토리 구조에 대한 논쟁이 줄어듦.
2. 개발 속도 향상:
   • 설정 없이 바로 프로젝트를 시작할 수 있어 초기 개발 시간 절감.
3. 확장성과 유지보수성:
   • 프로젝트가 커져도 표준화된 구조 덕분에 새로운 기능 추가가 용이.

---

💡 참고 자료:

• Next.js 공식 문서
• React 공식 문서
  https://tech.nexr.kr/dbe3aa3b-b984-4912-9e37-8f5cc18c9e88

[jokbalkiller]

React와 Next.js의 차이점에 대해 알게되어서 좋았습니다!

[suna-ji]

기술 스택 선정 시 많은점을 고려해서 next.js를 선정하셨다는걸 알게되었어요!
next에서 제공하는 기능 관련 내용(특히 트리 쉐이킹!)도 흥미롭게 들었습니다!