[Next.js] Next.js App Router, Pages Router 비교

Next.js 라우팅의 두 가지 방식 🤔

Next.js 13에서는 새로운 App Router가 추가되며 기존의 Pages Router와 함께 사용할 수 있게 되었음. 이 두 라우팅 방식은 각각 고유한 구조와 기능을 제공하며, Next.js 13 버전 이후 프로젝트를 구성할 때 어떤 라우팅을 사용할지 선택해야 함.

App 라우팅과 Pages 라우팅의 기본 개념 🔄

App 라우팅 (Next.js 13 이상)

• Next.js 13부터 새롭게 추가된 라우팅 방식.
• app/ 디렉토리에서 라우팅을 관리하며, 파일 시스템을 기반으로 자동 라우팅을 생성.
• React Server Components를 기본적으로 지원하여 서버 렌더링과 클라이언트 렌더링을 유연하게 조합 가능.

Pages 라우팅 (Next.js 12 이하 방식)

• Next.js의 기존 라우팅 방식으로, pages/ 디렉토리에서 파일 기반 라우팅을 관리.
• Next.js의 표준 방식으로 SSR, CSR, SSG, ISR을 지원.
• Next.js 13에서도 호환되므로 기존 프로젝트나 단순한 라우팅 구조를 가진 프로젝트에서 여전히 사용 가능.

App 라우팅 방식의 주요 특징 🎯

Next.js 13의 App Router는 파일 시스템과 디렉토리 구조를 기반으로 하는 새로운 라우팅 방식임. 아래는 App 라우팅 방식의 주요 특징들임.

React Server Components 기본 지원

App Router는 React Server Components를 기본으로 지원하여, 클라이언트 측 렌더링의 복잡성을 줄이고 SSR을 최적화할 수 있음. 페이지 컴포넌트를 서버에서 렌더링하고 필요한 데이터만 클라이언트로 전달하기 때문에 초기 로딩 속도가 빠르고, SEO에 최적화됨.

// app/dashboard/page.tsx
export default function Dashboard() {
  return <h1>Dashboard</h1>;
}

폴더 기반 라우팅 및 중첩 레이아웃 지원

App 라우팅 방식에서는 디렉토리를 이용해 라우트를 정의하고, 중첩 레이아웃을 쉽게 구현할 수 있음. layout.tsx 파일을 통해 각 경로에 대한 레이아웃을 지정하고, 페이지를 계층적으로 구조화할 수 있음.

app/
├── layout.tsx     # 전체 레이아웃
├── dashboard/
│   ├── layout.tsx # 대시보드 페이지 레이아웃
│   └── page.tsx   # 대시보드 페이지
└── profile/
    └── page.tsx   # 프로필 페이지

layout.tsx의 기본 구조와 역할

• 폴더 기반 라우팅에서 layout.tsx는 특정 폴더 내 모든 하위 경로에 공통 레이아웃을 제공함.
• app/ 디렉토리 내에 각 폴더별로 layout.tsx를 추가할 수 있으며, 이 레이아웃은 해당 폴더의 모든 페이지 및 하위 폴더에 적용됨.
• layout.tsx 파일은 React 컴포넌트로, children을 받아서 각 페이지 콘텐츠를 children으로 렌더링함.

에러 및 로딩 상태 처리

App Router는 error.tsx와 loading.tsx 파일을 통해 로딩과 에러 상태를 각 경로별로 쉽게 처리할 수 있음. 이로써 로딩 중이거나 에러가 발생한 페이지에 대해 사용자에게 적절한 UI를 제공할 수 있음.

// app/dashboard/loading.tsx
export default function Loading() {
  return <p>Loading...</p>;
}

Pages 라우팅 방식의 주요 특징 📄

Next.js의 기존 라우팅 방식인 Pages Router는 pages/ 디렉토리에 파일을 추가해 라우트를 설정하며, Next.js의 표준 기능으로 여전히 널리 사용됨.

파일 기반 라우팅

Pages Router에서는 파일을 기반으로 라우팅이 자동 생성되며, pages/about.js처럼 파일을 만드는 것만으로도 경로를 설정할 수 있음. 간단한 라우팅이 필요한 프로젝트나 기존 Next.js 프로젝트를 유지보수할 때 유용함.

// pages/about.js
export default function About() {
  return <h1>About Us</h1>;
}

SSR, SSG, ISR 지원

Pages Router는 SSR, SSG, ISR 기능을 지원하지만, 각 방식에 맞는 메서드 (getServerSideProps, getStaticProps)를 사용해 SSR과 SSG를 명시적으로 설정해야 함. 이로 인해 코드가 조금 더 복잡할 수 있음.

// pages/blog.js
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/blog');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

export default function Blog({ data }) {
  return <div>{JSON.stringify(data)}</div>;
}

동적 라우팅

pages 디렉토리에서 동적 라우팅을 구현할 때는 파일 이름에 대괄호([])를 사용하여 매개변수를 정의함. 이는 특정 URL 매개변수를 쉽게 처리할 수 있는 기능을 제공함.

// pages/posts/[id].js
import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { id } = router.query;

  return <p>Post ID: {id}</p>;
}

어떤 라우팅 방식을 선택할까? 🔍

App 라우팅을 선택할 때

• 서버 사이드 렌더링이 주된 기능이고, 초기 로딩 성능이 중요한 경우
• 중첩 레이아웃을 사용하여 페이지 구조를 깔끔하게 유지하고자 할 때
• 페이지별 로딩 상태나 에러 처리가 필요한 경우

Pages 라우팅을 선택할 때

• 프로젝트가 간단하고, 기존 Next.js 12 이하의 코드와 호환성이 중요한 경우
• 복잡한 레이아웃이 필요하지 않고, SSR이나 SSG를 명시적으로 관리하고자 할 때
• 빠르게 개발할 수 있는 간단한 프로젝트를 원할 때