Next.js의 App router 특징

App Router(Next.js 13+)의 특징

폴더 기반 라우팅

Page router에서는 파일명이 경로가 되었지만 App router에서는 폴더명이 경로를 나타냄

Page Router의 Routing

pages/
├── index.tsx       → `/`
├── about.tsx       → `/about`
├── contact.tsx     → `/contact`
├── blog/
│   ├── index.tsx   → `/blog`
│   ├── [id].tsx    → `/blog/:id` (동적 라우팅)

App Router의 Routing

app/
├── layout.tsx       → 모든 페이지에 공통 레이아웃
├── page.tsx         → `/`
├── about/
│   ├── page.tsx     → `/about`
│   ├── layout.tsx   → `/about` 전용 레이아웃
├── blog/
│   ├── page.tsx     → `/blog`
│   ├── [id]/
│   │   ├── page.tsx → `/blog/:id` (id는 동적 세그먼트)
│   │   ├── loading.tsx → 개별 블로그 로딩 화면

RSC를 default로 적용

이전에 사용하던 getStaticProps(SSG)나 getServerSideProps(SSR)을 사용하지 않아도 된다. 만약 RCC(React Client Component)를 사용하고 싶을 경우 해당 컴포넌트 파일의 상단에 "use client";를 추가해주면 된다.

"use client";

function ClientComponent(){
	return <>
    	//...
    </>
}

특정 역할을 수행하는 특수 파일 API 제공

• page.tsx (.js or .jsx 가능)
  해당 경로의 Page 파일

• layout.tsx
  UI 레이아웃. 경로별로 다르게 지정할 수 있다. loading 파일을 렌더링 하거나 다른 페이지를 탐색해도 레이아웃은 다시 렌더링하지 않는다.

• loading.tsx
  page가 로딩중일때 대체할 수 있는 로딩 화면을 지정할 수 있다. layout 파일에서 Suspense를 쓰면 자동적으로 fallback에 loading.tsx가 래핑된다.

  // app/blog/layout.tsx
  export default function MainLayout({children}: {children: React.ReactNode;}) 
  {
  	return (
      <div>
      	<h1>test</h1>
      	<Suspense>{children}</Suspense>
        {/* <Suspense fallback={<MainLoading/>}>{children}</Suspense> */}
      </div>
  	);
  }

  위의 주석친 Suspense 부분처럼 fallback prop을 명시적으로 지정하지 않아도 자동으로 해당 폴더의 loaindg.tsx나 app 폴더 밑의 공통으로 적용될 loading.tsx가 래핑된다.

• error.tsx
  런타임 발생시 loading.tsx처럼 대체 화면을 지정할 수 있다. 만약 Error Boundary가 있다면 Suspense에 loading.tsx가 자동으로 래핑된 것 처럼 Error Boundary의 fallback에 error.tsx가 자동으로 래핑된다.

• route.ts
  해당 경로(URL)에 해당하는 api request handler를 정의할 수 있다.

  		app/
  		├── layout.tsx       → 모든 페이지에 공통 레이아웃
  		├── page.tsx         → `/`
  		├── about/
  		│   ├── page.tsx     → `/about`
  		│   ├── layout.tsx   → `/about` 전용 레이아웃
  		├── blog/
  		│   ├── page.tsx     → `/blog`
  		│   ├── route.ts     → `/blog` api request 처리