[Next.js 13] 라우팅 정의 방법 (Defining Routes)

# Next.js 13 라우팅 정의 방법

Next.js 13은 파일 시스템 기반의 라우터를 사용한다.

/app 디렉토리 내부에 폴더를 만들면, 각 폴더명은 라우팅 경로(Route Segement)가 된다.
폴더 내부에 또 다른 폴더를 만들면, 중첩 라우팅 경로(Nested Route)가 된다.

cf. 라우트/라우팅 용어

"라우트"는 사실 영어로는 Route이며, 일반적으로 "루트"로 읽고, "경로"를 의미한다.

하지만, Next.js 에서는 Route는 "라우트", Routing은 "라우팅", Router는 "라우터"으로 읽는듯하여 그대로 표기하였다.

즉, 라우트 === 루트(접속 경로) 와 같은 의미이다.

# 라우트 만들기 (Creating Routes)

Route를 만드는 방법은 다음과 같다.

/app 디렉터리 내부에 폴더를 생성한다
해당 폴더 내부에 page.js 파일을 만든다.
React Component를 정의하여 화면 UI 및 기능을 구현한다.

각 폴더는 Route Segment 라고 부르며, 접속 가능한 URL 경로가 된다.

예를 들어, /app/dashboard/page.js 를 만들면:

http://domain.com/dashboard 경로로 접속이 가능하며,
page.js 파일에 정의된 대로 UI가 렌더링 된다.

page.js 파일이 없으면 외부에서 접속이 불가능하므로 꼭 추가해야 한다.

위에서 /analytics 폴더는 page.js 파일이 없어서 외부에서 접속이 불가능하므로 Route Segment 가 되지 못한다.

이런 폴더들은 다른 React 컴포넌트들이나 스타일 시트, 유틸 함수 등을 넣는 용도로 사용 가능하다.

# 페이지 화면 만들기 (Creating UI for Routes)

각 Route Segment 의 화면 UI는 page.js 파일과 layout.js 파일을 통해서 구성된다.

각 파일 내부에 React Component 를 정의하여 UI 및 기능을 구현해주면 된다.

page.js
- 해당 접속 경로(route)에 해당하는 페이지의 UI를 만든다.

layout.js
- 여러 page.js에 적용되는 공통 레이아웃을 구성한다.

즉, 공통 레이아웃은 layout.js로 정의해두고,

각 화면 별로 unique 한 UI는 page.js 에 정의한 후, layout.js에 감싸주면 된다.

page.js는 layout.js 의 children porp 을 통해 포함시킬 수 있다.

/* /app/layout.tsx */
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

/* /app/page.tsx */
export default function Home() {
  return (
    <main>
      <h1>Home Page</h1>
    </main>
  );
}

Next.js 프로젝트를 처음 생성하면, /app 경로에 기본으로 page.js와 layout.js 파일이 생성된다.

이 page.js 파일은 / 경로로 접속하는 페이지의 화면을 구성하며, layout.js 는 모든 화면에 적용되는 루트 레이아웃이 된다.

예를 들어,

/app 폴더에 추가로 /dashboard 폴더를 만들어 page.js와 layout.js 파일을 생성하면,

/app/dashboard/page.js 는 http://doamain.con/dashboard 로 접속했을 때의 화면을 구성하며,

/app/dashboard/layout.js 는 루트 레이아웃(/app/layout.js)의 자식으로 중첩 적용된다.

# 컴포넌트 중첩 구조 (Component Hierarchy)

Next.js 13은 라우팅과 화면 구성을 위해 특별한 파일(Special File Convention)을 몇개 제공한다.

이들은 모두 React Component 파일들로, 아래와 같은 구조로 우선순위(Hierarchy)를 갖고 중첩되어 적용된다.

(Layout 또한 중첩 적용됨을 알 수 있다.)

각 파일의 역할을 간단하게 정리하면 다음과 같다.

page.tsx
- 각 페이지의 UI를 만드는 React Component 파일이다.
- page.js 파일이 포함된 폴더를 접속 가능한 Route Segment로 만든다.

layout.tsx
- 여러 페이지에 적용되는 공통 레이아웃 UI를 만드는 React Component 파일이다.
- children 프랍으로 page.js 들을 자식 컴포넌트로 포함시킬 수 있다.

loading.tsx:
- 페이지에 로딩이 발생하는 경우, 로딩 UI를 만드는 React Component 파일이다.
- 내부적으로 React "Suspense" Boundary 를 렌더링한다.

not-found.tsx
- 404 Not found 에러 발생용 UI를 만드는 React Component 파일이다.
- 내부적으로 React "Error Boundary" 를 렌더링한다.

error.tsx
- 내부 에러 발생시 화면을 구성하는 React Component 파일이다.
- 내부적으로 React "Error Boundary" 를 렌더링한다.

저작자표시 변경금지

'개발(Development) > Next.js 13' 카테고리의 다른 글

[Next.js 13] layout.js: 레이아웃 기본 정리 (0)	2023.08.29
[Next.js 13] page.js : 페이지 컴포넌트 기본 정리 (0)	2023.08.29
[Next.js 13] 라우팅 기본 정리 (Routing fundamental) (0)	2023.08.23
[Next.js 13] Server Component vs. Client Component 기본 및 사용 방법 (0)	2023.08.21
[Next.js 13] 프로젝트 폴더/파일 구조 이해하기 (0)	2023.08.19

카레유

[Next.js 13] 라우팅 정의 방법 (Defining Routes)