<aside> 💡

NextJS는 라이브러리가 아니라 프레임워크이기 때문에 정해진 룰대로 파일이름을 지정하고 폴더구조 구성을 잘하는게 중요하다.

</aside>

1. app

13버전으로 넘어오면서 폴더구조가 많이 바뀌었다.. (나중에 공부할껄)

처음 NextJS 프로젝트를 시작하면 app 폴더가 최상위 root에 있다. 여기에 모든 페이지가 있다고 생각하면 편하다.

1-1) Layout

RootLayout

• ./app 경로 최상위 Layout 이다. 컴포넌트 이름을 RootLayout 로 지어야 한다.
• 모든 하위 경로에 공통적으로 들어가는 코드이다.
• 12버전의 _app.tsx, _document.tsx 와 동일하다.

NestedLayout

• 특정 페이지 안에서만 공통적으로 들어가는 코드다. 컴포넌트 이름을 Layout 로 지어야 한다.
• layout.js를 통해 해당 폴더 내부의 모든 자식 라우트에 공통 레이아웃을 적용할 수 있다.

1-2) Page

• 각 페이지의 루트 파일이다.
• 각 폴더에 page.js(또는 page.tsx) 파일이 있으면, 해당 폴더가 라우트 경로가 된다.