Next.js 구조에 대해서 제대로 모르고 사용하다보니 쉽게 해결할 일도 어렵게 만드는 것을 가끔 겪는 것 같다. 오늘은 Next.js에서 제공해주는 프로젝트 구조에 대해서 간단하게 살펴볼 예정입니다. 공부하게 되면서 새롭게 알게 되는 것들을 적용할 수 있으니 한번 블로그를 적으면 알아보겠습니다.

Top-level folder

최상위 폴더에는 app, pages, public, src가 있습니다.

app

app

: App Router를 사용하기 위한 폴더입니다.

• Next.js에서 공유 레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원하는 React Server Components를 기반으로 구축된 새로운 매커니즘입니다.

page

: Page Router를 사용하기 위한 폴더입니다.

• 페이지 개념을 기반으로 구축된 파일 시스템 기반 라우터이며, 파일이 디렉터리에 추가되면 pages 자동으로 경로로 사용할 수 있습니다.
• public: Static Assets 즉, 정적 에셋을 제공할 때, 사용하는 폴더입니다.
• src: application 소스 폴더이며, 필수는 아닙니다.

Top-level files

next.config.js

: Next.js를 구성하는 파일입니다.

• 서버 및 빌드 단계에서 사용되며 브라우저 빌드에는 포함되지 않습니다.
• ESM이 필요한 경우, next.config.mjs 를 통해 사용할 수도 있습니다.