🟦 [React] Next.js란?

Next.js란?

 

1. Next.js란?
- React 기반의 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), API 라우트 등을 지원
- 성능 최적화와 개발 편의성을 높이는 것이 특징

2. Next.js의 역사
- Next.js는 2016년 Vercel(구 Zeit)에서 개발
- React는 컴포넌트 기반 UI 개발에는 탁월했지만, SEO 최적화와 초기 로딩 속도 문제를 해결하는데 문제가 있어
  이를 보완하기 위해 Next.js가 등장

3. Next.js의 주요 기능
- 라우팅 시스템 => html와 같이 파일명으로 경로 이동 가능
> 파일 기반 라우팅을 제공
/pages/index.js -> / 경로 (루트 경로)
/pages/about.js -> /about 경로
/pages/blog/[id].js -> 동적 라우팅 (/blog/123)

- 렌더링 방식
> 다양한 렌더링 방식 지원

렌더링 방식	동작
서버 사이드 렌더링 (SSR)	요청시 서버에서 페이지 생성
정적 사이트 생성 (SSG)	빌드시 HTML을 미리 생성
클라이언트 사이드 렌더링	프론트엔드에서 데이터 가져오기
점진적 정적 생성 (ISR)	SSG 처럼 미리 생성하면서, 일정 시간마다 갱신

- API Routes
> 백엔드 없이 /pages/api/ 디렉터리에 API 엔드포인트 생성 기능
> Express.js 같은 별도 서버 필요 없이 API 개발 가능

- 이미지 최적화 
> next/image 컴포넌트를 사용해 자동 이미지 최적화

- 국제화(i18n)
> 다국어 지원 기능 내장

- Webpack & SWC
> Webpack으로 번들링 최적화
> SWC 사용 시 빌드 속도 증가

4. Next.js의 장점
- SEO 최적화
- 빠른 성능
- 개발 편의성
- 강력한 데이터 패칭
- 이미지 최적화
- 대규모 애플리케이션 개발 가능

5. Next.js의 단점
- 학습 곡선(러닝 커브)가 존재(기본적인 React 사용법 외에도 SSR, SSG, ISR 개념을 익혀야 함)
- 서버 비용 증가 가능(SSR을 과도하게 사용하면 서버 부하가 커지고 비용 증가 가능)
- 빌드 속도 이슈(SSG 페이지가 많을 경우 빌드 시간이 길어질 수 있음)
- 백엔드 기능 부족(API Routes 기능이 있지만, 본격적인 백엔드 서버 기능은 부족)

6. Next.js를 사용하는 유명 기업
- Vercel(Next.js 개발사)
- Netflix
- TikTok
- Twitch
- GitHub Copilot

---

1. 페이지 라우터
- Next 초창기부터 제공되어 오던 구버전 라우터
- 많은 기업에서 사용되고 있는 안정적인 라우터
- React Router 처럼 페이지 라우팅 기능 제공

 

2. 앱 라우터
**
_document.js => html 구조 (head)
_app.js => 모든 화면에 적용 (header, footer)
**