Next.js (0. Getting Started) 정리

0. Next.js 시작하기

---

1. Next.js란?

---

Next.js는 React 기반으로 풀스택 웹 애플리케이션을 만들 수 있는 프레임워크이다.

UI(사용자 인터페이스)는 React 컴포넌트로 만들고, 추가 기능과 최적화는 Next.js가 제공한다.

또한, Next.js는 번들러나 컴파일러 같은 하위 레벨의 도구들을 자동으로 설정해주기 때문에, 개발자는 설정에 시간을 쓰지 않고 제품을 빠르게 만들고 배포하는데 집중할 수 있다.

2. App Router와 Pages Router

---

Next.js에는 두 가지 라우터가 존재한다.

• App Router
  • Next.js의 신규 라우터
  • React Server Components 등 최신 React 기능을 지원
  • Next.js 13 이후 도입된 새로운 구조
• Pages Router
  • Next.js의 기존 라우터
  • 지금도 지원되고 계속 개선 중
  • /pages 디렉토리 기반 라우팅 방식

또한, 두 라우터는 React 버전을 다르게 사용한다.

• App Router
  • React Canary 릴리스를 기본적으로 사용
  • React 19의 모든 안정화된 기능 포함
  • 공식 React 릴리스 전에 프레임워크에서 새로운 기능을 먼저 검증하기 위해 최신 기능도 포함

  즉, React 최신 기능을 가장 안정적으로 지원하는 환경

• Pages Router
  • 프로젝트의 package.json에 설치된 React 버전을 그대로 사용
  • 기존 프로젝트와 하위 호환성 유지에 초점

요약하자면,
App Router는 최신 React 기능을 빠르고 안정적으로 제공하고,
Pages Router는 기존 프로젝트는 그대로 유지되면서 호환성을 보장한다.