Next.js 14 핵심 기능: App 라우팅과 Pages 라우팅의 장단점 비교

Next.js 12버전이하에서는 기본적으로 Pages Routing 방식을 사용했으나 Pages Routing의 단점을 극복하고자 14버전에서 App Routing을 도입하게 되었습니다. 그래서 현재 14버전에서는 Pages Routing과 App Routing 방식을 선택하여 사용할 수 있습니다. 각 라우팅 컨벤션은 서로 다른 구조와 특징을 가지고 있으며, 프로젝트의 특성에 따라 적합한 컨벤션을 선택하는 것이 중요합니다. 기존 Next.js 프로젝트를 관리하는 차원이라면 Pages 라우팅 방식을 추천하지만 만약 새롭게 프로젝트를 진행하게 된다면 App 라우팅 방식을 추천합니다.

1. App 라우팅 컨벤션

App Routing Conventions는 Next.js 14 버전에서 새롭게 도입된 라우팅 컨벤션입니다. 컴포넌트 기반 라우팅을 사용하며, 다음과 같은 특징을 가집니다.

• 구조:
  • app 폴더를 루트 폴더로 사용합니다.
  • pages 폴더는 사용하지 않습니다.
  • 라우팅은 app/routes.js 파일에서 설정할 수 있습니다.
  • 각 페이지는 app/폴더명 폴더에 위치한 컴포넌트로 구성됩니다.
• 특징:
  • 컴포넌트 기반 라우팅으로 코드 조직 및 관리가 용이합니다.
  • 레이아웃 구성 및 재사용이 간편합니다.
  • 서버 액션, 파일 시스템 기반 라우팅 등을 지원합니다.

2. Pages 라우팅 컨벤션

Pages Routing Conventions는 기존 Next.js 12버전 이하에서 사용하던 라우팅 컨벤션입니다. 파일 시스템 기반 라우팅을 사용하며, 다음과 같은 특징을 가집니다.

• 구조:
  • pages 폴더를 루트 폴더로 사용합니다.
  • 각 페이지는 pages 폴더 내에 index.js 파일로 구성됩니다.
  • URL 경로는 pages 폴더의 구조에 따라 결정됩니다.
• 특징:
  • 파일 시스템 기반 라우팅으로 직관적이고 이해하기 쉽습니다.
  • 기존 Next.js 프로젝트와 호환됩니다.
  • 정적 페이지 생성에 적합합니다.

1. 비교 요약

특징	App 라우팅	Pages 라우팅
구조	app 폴더 기반	pages 폴더 기반
라우팅 방식	컴포넌트 기반	파일 시스템 기반
레이아웃	컴포넌트 기반	페이지 기반
서버 액션	지원	지원하지 않음
파일 시스템 기반 라우팅	지원	지원
정적 페이지 생성	지원	지원
코드 조직 및 관리	용이	다소 어려움
레이아웃 구성 및 재사용	간편	다소 어려움

4. 적합한 컨벤션 선택

다음은 각 라우팅 컨벤션에 적합한 프로젝트 유형입니다.

App 라우팅

• 컴포넌트 기반 구조를 선호하는 프로젝트
• 레이아웃 구성 및 재사용이 중요한 프로젝트
• 서버 액션을 사용하는 프로젝트

Pages 라우팅

• 기존 Next.js 프로젝트
• 정적 페이지 생성에 초점을 맞춘 프로젝트
• 파일 시스템 기반 라우팅을 선호하는 프로젝트 5. 추가 정보

5. 결론

Next.js 14 버전은 두 가지 라우팅 컨벤션을 제공하여 개발자의 선택 폭을 넓혔습니다. 프로젝트의 특성을 고려하여 적합한 컨벤션을 선택하여 효율적인 Next.js 애플리케이션 개발을 진행하시기 바랍니다.