Day 50 #100DaysOfCode — Introduction to Next.js

Context

React만으로 풀스택 애플리케이션을 개발할 때 프로젝트 구조 결정, React Router를 통한 수동 라우팅 설정, 서버사이드 렌더링 구현, 백엔드 로직을 위한 별도 프로젝트 관리 등의 오버헤드가 발생한다. 또한 클라이언트사이드 렌더링만으로는 SEO 최적화와 성능 최적화가 어렵다.

Technical Solution

• File-based routing 도입: 폴더 구조가 곧 라우트가 되어 React Router 같은 별도 라우팅 라이브러리 설정 제거 (예: app/blog/[slug]/page.js가 /blog/:slug 라우트 자동 생성)
• Server Components 기본 설정: App Router에서 모든 컴포넌트가 기본으로 서버에서 렌더링되어 번들 크기 감소 및 성능 향상 (클라이언트 전용 기능 필요 시에만 "use client" 지시어 추가)
• Server-Side Rendering(SSR) / Static Site Generation(SSG) 지원: 페이지를 서버에서 요청별로 렌더링하거나 배포 시점에 사전 생성하여 검색 엔진이 HTML 콘텐츠 수집 가능
• API Routes 내장: 별도 백엔드 프로젝트 없이 프론트엔드 프로젝트 내 백엔드 엔드포인트 작성 (기존 Express.js 같은 외부 백엔드 제거)
• 자동 코드 분할 및 이미지 최적화: 번들 크기 자동 관리 및 이미지 포맷 최적화로 성능 향상 기본 제공

Key Takeaway

Next.js는 단순 UI 라이브러리인 React에 라우팅, 서버사이드 렌더링, 백엔드 기능을 통합하여 프로젝트 구조 결정, 설정, 최적화 작업을 자동화하는 풀스택 프레임워크이다. 이는 React의 문법이나 개념 변화가 아닌 애플리케이션 설계 방식 자체의 전환이다.