App Router with Next.js 13

Sienna·2024년 7월 14일

Next.js 13 app router 앱 라우터

현재 진행하는 플젝에서 App router를 사용하면서 처음으로 접해보게 되었다.
새로운걸 시작하면 모르는게 참 많고 배울게 참 많다... 너무 좋다 😥

Next.js 13버전에서 stable로 들어선 app rotuer에 대해 알아보도록 하자.

App Router

app directory 안에 있는 컴포넌트들은 모두 default로 Server 컴포넌트이다.
경로 이동시 페이지를 다시 렌더링하지 않고, SPA처럼 URL만 업데이트하고 next는 변경된 세그먼트만 렌더링한다.
공유 레이아웃, 중첩 라우팅, 로딩 상태, 에러 핸들링 등 유용한것들을 지원한다.

1. Route Segments

기존의 pages 디렉토리에서 app 디렉토리로 라우팅 하는 방식이 추가되었다.
app 내부의 폴더들은 route를 정의하기 위해 사용되며, 폴더를 중첩하여 URL path를 생성하는 것이 가능하다.

2. File conventions

app 디렉토리 아래에 들어가는 중요한 파일들이 있다.

layout

segment와 children들에 대해 공통 UI를 생성한다.
레이아웃은 상태를 유지하고 해당 폴더 내에서 탐색할때 다시 렌더링되지 않는 장점이 있다.
위 구조의 경우 /dashboard 와 /dashboard/settings 디렉토리에 layout이 적용된다.
child 레이아웃이나 child 페이지가 있는 경우에, 항상 children props 설정해야 한다.

// app/dashboard/layout.tsx

export default function DashboardLayout({
  children, // will be a page or nested layout
}: {
  children: React.ReactNode
}) {
  return (
    <section>
      {/* Include shared UI here e.g. a header or sidebar */}
      <nav></nav>
 
      {children}
    </section>
  )
}

[Root layout]

app 디렉토리 바로 아래 생성된 layout은 root layout으로 반드시 존재해야한다.
html, body 태그를 포함해야한다.

// app/layout.tsx

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {/* Layout UI */}
        <main>{children}</main>
      </body>
    </html>
  )
}

[중첩 layout]

기본적으로 layout은 중첩된다.
children prop를 통해 하위의 컴포넌트를 감싸며, 특정 디렉토리 안에 layout 파일을 추가하여 레이아웃을 중첩할 수 있다.

// app/dashboard/layout.tsx

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <section>{children}</section>
}

loading

segment와 children들에 대해 로딩 UI를 생성한다.
suspense로 감싸진 suspense의 바운더리 내부의 데이터가 로딩되는 동안 보여지는 대체 UI이다.
같은 폴더 안에서, loading.js는 layout.js 안에 중첩되며, 이는 page.js 파일과 그 아래의 모든 자식을 자동으로 Suspense 경계로 감싼다.

error

segment와 children들에 대해 에러 UI를 생성한다.
error 파일은 중첩된 자식 세그먼트나 page 컴포넌트를 감싸는 React Error Boundary를 자동으로 생성한다.

error.js 파일에서 내보낸 React 컴포넌트는 대체(fallback) 컴포넌트로 사용된다.
에러 경계 내에서 에러가 발생하면, 에러가 격리되고 대체 컴포넌트가 렌더링된다.
fallback 에러 컴포넌트가 활성화되면, 에러 바운더리 밖의 레이아웃은 상태를 유지하고 상호작용할 수 있으며, 에러 컴포넌트에서 에러 복구 기능을 표시할 수 있다.

3. Component Hierarchy

위의 파일들이 적용된 기본적인 구조는 위의 이미지와 같다.
만일 중첩된 파일 구조를 가지고 있다면??

위와 같은 구조를 가지게 된다. setting 폴더 내부에 layout이 없는 경우 부모 디렉토리 내부의 layout을 따라간다. 그러므로 일일히 자식 폴더에 layout을 만들어 줄 필요가 없고, 구조가 달라지는 경우에만 생성해주면 된다.

만일, 폴더 구조상 같은 부모 디렉토리를 가져야 하지만, 형제 디렉토리 그룹끼리 서로 다른 레이아웃으로 적용되야 하는 경우는 어떻게 해야할까? 모든 형제 디렉토리 내부에 layout 파일을 추가해야하는 것인가??

Route Group

일반적으로 app 디렉토리 내부의 모든 디렉토리 구조는 URL에 반영이 된다. 하지만 간혹 URL 경로에 특정 디렉토리를 포함하고 싶지는 않지만 유관된 파일을 모아둘 디렉토리가 필요하기도 하다. 위에 설명한 케이스가 Route Group이 필요한 케이스 중 하나이다.

위 이미지에서와 같이 폴더이름을 소괄호로 묶어주면 해당 디렉토리는 라우터 경로에 반영되지 않고 하위 디렉토리를 그룹으로만 묶어준다. 그래서 동일한 URL 위계를 가지더라도 각각의 layout을 반영할 수 있게 되는 것이다.