[ Next.js ] - app router란?

App router란?

기존에 nextjs에서 pages 폴더를 통하여 사이트의 라우팅을 하던 방식과 달리 파일 구조에 따라 사이트의 경로를 설정하는 방식이다.

npx create-next-app를 통해 nextjs 어플리케이션 프로젝트를 생성할 경우 기존의 pages router 방식에서는 pages 폴더가 존재했으나 app router 방식에서는 src/app 폴더가 존재하며, 해당 폴더의 하위에 생성되는 폴더와 파일을 기준으로 사이트의 경로가 설정된다. 

더불어 src/app 폴더의 하위에 기본적으로 layout.tsx 파일과 page.tsx 파일이 존재하는데, 파일명을 보면 알 수 있듯이 layout.tsx파일은 레이아웃을 정의하는 파일이며, page.tsx 파일은 사용자가 실질적으로 사이트의 루트 경로를 방문했을 때 렌더링되는 페이지이다.

---

layout.tsx

layout.tsx 파일은 필수적으로 html과 body 태그를 사용하여 레이아웃을 정의하여야 한다. 또한 해당 레이아웃이 다른 페이지들에 적용될 수 있도록 ReactNode를 props로 받아 body 안에 넣어주는 구조로 짜여져야 한다. (html과 body 태그는 root layout의 경우에만 적용되며, 루트에서 생성한 레이아웃ㅇ 파일은 모든 페이지에 적용된다.)

page.tsx

page.tsx 파일의 경우 layout.tsx 파일과 같이 필수적으로 가져야 할 태그나 구조는 존재하지 않으며, 단순히 사이트의 루트 경로에 방문시 렌더링 될 페이지를 생성하여 주면 된다. 

---

App Routing 파일명 규칙

app router 방식을 사용할 경우 아래와 같이 기본적인 파일명 규칙이 존재한다. 예를 들어 파일명을 not-found.tsx로 해줄 경우 사이트에서 존재하지 않는 경로로 방문시에 라우팅 설정을 별도로 해주지 않아도 not-found.tsx 파일이 렌더링되게 된다.

• page : 파일명이 page인 경우에, 상위 폴더명의 경로의 기본 페이지로 렌더링된다. 예를 들어 user/page.tsx와 같이 user 폴더 하위에 page.tsx가 존재할 때 사용자가 /user 경로로 들어올 때 해당 page.tsx 파일이 렌더링된다.
• layout: 파일명이 layout인 경우에, 해당 폴더의 레이아웃으로 설정된다. 예를 들어 user/layout.tsx 와 같이 존재할 때에 user 하위page.tsx 파일의 레이아웃으로 설정된다. 
• loading: 파일명이 loading인 경우 ui가 로딩 중인 상태에서는 해당 파일이 보여진다.
• not-found: 사이트에 존재하지 않는 경로로 접속한 경우 렌더링되는 파일이다
• error: ui에 에러가 발생한 경우
• global-error : 전역에 적용되는 에러 페이지
• template ...
•  default....

* 참고로 리엑트 컴포넌트는 layout>template>error>loading>not-found>page 의 계층 구조를 가진다.

 

 

app-router 출처 : https://nextjs.org/docs/getting-started/installation