Next.js

📘 Official Docs

• What is Next.js?
• About React and Next.js

📚 References

인프런 강의 「한 입 크기로 잘라먹는 Next.js」
Next.js 섹션은 강의 내용을 참고하여, 개인적으로 이해한 내용을 정리하고 보완한 글입니다.
일부 코드 예시와 이미지는 강의 자료를 참고했습니다.

Next.js란?

Next.js는 React 전용 웹 개발 프레임워크다.
UI는 React 컴포넌트로 작성하고, 라우팅·데이터 패칭·렌더링·성능 최적화 등
웹 애플리케이션에서 반복적으로 마주치는 문제들을 프레임워크 차원에서 해결해준다.

Next.js는 무엇을 해결했을까?

Next.js는 사전 렌더링 + Hydration 구조를 사용한다.

• 서버에서 HTML을 미리 생성
• 브라우저는 HTML을 받자마자 화면을 표시
• 이후 JavaScript가 로드되면서 Hydration 수행
• 이후부터는 React SPA처럼 동작

빠른 첫 화면 + 빠른 페이지 이동 두 장점을 모두 가져간다.

🧩 TTI (Time to Interactive)

사용자가 실제로 페이지와 상호작용할 수 있는 시점 → 클릭·입력이 가능한 시점

💧 Hydration

서버에서 내려온 HTML은 정적인 마크업이다. 보이기만 할 뿐, 클릭은 되지 않는다.
Hydration은 이 HTML에 React가 이벤트와 상태를 연결해 상호작용 가능하게 만드는 과정이다.

• HTML은 빠르게 보이지만, JS 로딩 전까지는 보기만 가능
• JS가 로드되면 그때부터 클릭, 입력 등이 작동
• 서버 HTML과 클라이언트에서 생성되는 구조가 다르면 오류가 발생할 수 있다

이러한 구조는 결국 React와 Next.js의 핵심적인 차이로 이어진다.

React와 Next.js의 가장 큰 차이점 중 하나는
데이터를 언제 가져오고, HTML을 언제 생성하느냐에 있다.

이 차이는 초기 렌더링 성능, 사용자 경험(UX), SEO에 직접적인 영향을 미친다.

Next.js는 Framework

Next.js와 React의 차이는 기능 구현의 주도권에 있다.

• React: UI 개발을 위한 JavaScript Library
• Next.js: React 전용의 웹 개발 Framework

Library의 특징

Library는 개발자가 주도권을 가진다.
필요한 기능을 직접 선택하고, 원하는 방식으로 조합해 사용한다.

예를 들어 React에서 페이지 라우팅이 필요하다면
React Router, TanStack Router 등 다양한 라이브러리 중 하나를 선택해야 한다.

• 자유도가 높다.
• 기본 기능만 제공하며, 나머지는 직접 구성해야 한다.

Framework의 특징

Framework는 프레임워크가 전체 구조를 주도한다.
개발자는 프레임워크가 제공하는 규칙과 범위 안에서 기능을 구현한다.

예를 들어 Next.js에서 페이지 라우팅을 구현할 때는
Next.js가 제공하는 Pages Router 또는 App Router를 사용해야 한다.

• 자유도는 상대적으로 낮다.
• 웹 애플리케이션에 필요한 대부분의 기능을 기본으로 제공한다.

App Router와 Pages Router

Next.js는 두 가지 라우팅 방식을 제공한다.

Pages Router

페이지 라우터는 Next.js 초창기부터 제공되어 온 기존 라우터 방식이다.
pages 디렉터리를 기반으로 파일 구조에 따라 라우팅이 결정된다.

• 오랫동안 사용되어 안정성이 높다.
• 기존 레거시 프로젝트에서 여전히 널리 사용된다.
• 구조가 단순해 Next.js 입문자가 이해하기 쉽다.

App Router

앱 라우터는 Next.js 13과 함께 공개된 새로운 라우팅 방식이다.
app 디렉터리를 기반으로 하며, 서버 중심 아키텍처를 적극적으로 활용한다.

• React Server Components
• 데이터 패칭 및 페이지 단위 캐싱
• 스트리밍(Streaming)
• Server Actions

🤔 그럼 페이지 라우터는 이제 안 배워도 될까?

App Router가 등장했지만, Pages Router 기반의 프로젝트는 여전히 많이 사용되고 있다.
두 라우터의 차이를 함께 이해해 두면 Next.js의 변화 흐름을 파악하는 데에도,
기존 방식의 어떤 한계를 보완했는지 이해하는 데에도 도움이 될 것 같다!