Next.js App Router 정리

Next.js의 App Router는 13버전부터 도입된 새로운 라우팅 방식으로, 기존의 Pages Router보다 더 현대적이고 유연한 기능을 제공합니다. App Router를 통해 서버 컴포넌트와 클라이언트 컴포넌트를 효과적으로 관리하며 React 18의 기능을 최대한 활용할 수 있습니다. 아래는 App Router의 주요 개념과 특징, 활용법을 정리한 내용입니다.

---

1. App Router의 주요 개념

폴더 기반 라우팅

• app 디렉토리를 사용해 파일과 폴더 이름만으로 라우팅이 자동으로 설정됩니다.
• 예:

  app/
    ├── page.js       // 루트 경로 ('/')
    ├── about/
    │   └── page.js   // '/about'
    ├── blog/
    │   ├── [slug]/
    │   │   └── page.js  // 동적 라우팅: '/blog/:slug'
    │   └── page.js   // '/blog'
  

서버 컴포넌트와 클라이언트 컴포넌트

• 서버 컴포넌트 (기본): 서버에서 렌더링되어 전송, SEO와 성능 최적화에 유리.

• 클라이언트 컴포넌트: 클라이언트에서만 실행되어 상태 관리, 인터랙션 등에 사용.

• 클라이언트 컴포넌트를 선언하려면 use client를 파일 맨 위에 추가.

  "use client";
  
  export default function ClientComponent() {
    return <button>Click me</button>;
  }
  

라우트 파일의 종류

• page.js: 페이지 컴포넌트 정의.
• layout.js: 해당 폴더와 하위 경로에 적용될 레이아웃.
• loading.js: 로딩 상태를 처리.
• error.js: 에러 페이지 처리.
• not-found.js: 404 페이지 처리.
• template.js: layout.js와 유사하지만, 재사용 가능.

---

2. App Router의 특징

1) 동적 라우팅

• 대괄호([])를 사용하여 동적 경로를 정의.

  app/products/[id]/page.js
  // URL: /products/123