TIL

Next.js

Pages Router vs App Router

라우팅

Pages Router

pages/가 라우팅 최상위 디렉토리가 되며, 하위 디렉토리 또는 파일명대로 라우팅됨

└── pages
    ├── about.js
    ├── index.js
    └── team.js

이 경우 페이지는 /about, /, /team 이렇게 3개가 된다.

App Router

page별로 자체 디렉토리가 있고, 디렉토리명을 path로 렌더링하는 구성요소는 디렉토리 내부의 page.js가 됨 일종의 index와 같은 역할을 하는 셈.

src/
└── app
    ├── about
    │   └── page.js
    ├── globals.css
    ├── layout.js
    ├── login
    │   └── page.js
    ├── page.js
    └── team
        └── route.js

이 경우 페이지는 /about, /login, /가 됨.
team 디렉토리에는 page.js가 없으므로 경로로 인식하지 않음

공통 레이아웃

Pages Router

Layout 컴포넌트를 만들어서 _app 파일에서 Component를 감싸는 방식으로 렌더링

App Router

layout.js 파일을 탐색해서 레이아웃 적용 하위 디렉토리 안에 layout 파일이 없다면 상위의 layout 파일을 찾는 방향으로 탐색함