Next.Js 디렉터리 구조 설계하기

들어가며

기존에 개발 공부를 독학하면서 Next.js 를 사용하여 간단한 커뮤니티 게시판 (+리댓글 기능까지) 구현했던 적이 있는데 그때 남겨뒀던 기록 아카이브 용입니다.
 
기억으로는 Next.js 13 을 기준으로 하였으며, 추후에 글이 수정될 수 있습니다.
 
Next.js 의 파일구조 별로 코드가 실행되는 기능이 다르기 때문에, 
https://wityan.medium.com/next-js-project-structure-1531610bed71 를 참고하여 전체적인 구조를 잡았습니다.
 

---

1. Elements

src
 ┣ components
 ┃ ┣ elements
 ┃ ┃ ┗ Icon
 ┃ ┃ ┃ ┗ Icon.tsx

이 디렉토리에는 앱의 모든 기본 구성 요소가 포함되어 있습니다. 예를 들어 버튼이나 헤드라인 컴포넌트가 여기에 포함됩니다.

• Icon > Icon.tsx

2. Modules

src
┣ components
┃ ┣ modules
┃ ┃ ┗ Header
┃ ┃ ┃ ┣ __snapshots__
┃ ┃ ┃ ┃ ┗ Header.test.tsx.snap
┃ ┃ ┃ ┣ Header.module.scss
┃ ┃ ┃ ┣ Header.test.tsx
┃ ┃ ┃ ┗ Header.tsx

기본 빌딩 블록 이상의 모든 컴포넌트를 여기에 만듭니다. 헤더 또는 푸터 컴포넌트가 그 예입니다.
대부분의 경우 이러한 모듈은 elements로 구성됩니다.
 

3. Templates

src
┣ components
┃ ┗ templates
┃ ┃ ┗ HomePage
┃ ┃ ┃ ┣ HomePage.module.scss
┃ ┃ ┃ ┗ HomePage.tsx

템플릿 디렉터리에는 Next.js 특정 페이지에서 호출되는 모든 페이지 템플릿을 배치해야 합니다. 
 
 
 

4. Layouts

src
 ┣ components
 ┃ ┣ layouts
 ┃ ┃ ┗ Default
 ┃ ┃ ┃ ┣ Default.module.scss
 ┃ ┃ ┃ ┗ Default.tsx

레이아웃은 템플릿을 감싸고 특정 레이아웃에 기본적으로 표시될 컴포넌트를 제공하는 데 사용됩니다.
예를 들어 기본 레이아웃에 푸터와 헤더를 포함할 수 있습니다.
 

---

결론적으로 전체 파일 구조는 다음과 같습니다.

src
 ┣ api
 ┃ ┗ RestClient.ts
 ┣ components
 ┃ ┣ elements
 ┃ ┃ ┗ Icon
 ┃ ┃ ┃ ┗ Icon.tsx
 ┃ ┣ layouts
 ┃ ┃ ┗ Default
 ┃ ┃ ┃ ┣ Default.module.scss
 ┃ ┃ ┃ ┗ Default.tsx
 ┃ ┣ modules
 ┃ ┃ ┗ Header
 ┃ ┃ ┃ ┣ __snapshots__
 ┃ ┃ ┃ ┃ ┗ Header.test.tsx.snap
 ┃ ┃ ┃ ┣ Header.module.scss
 ┃ ┃ ┃ ┣ Header.test.tsx
 ┃ ┃ ┃ ┗ Header.tsx
 ┃ ┗ templates
 ┃ ┃ ┗ HomePage
 ┃ ┃ ┃ ┣ HomePage.module.scss
 ┃ ┃ ┃ ┗ HomePage.tsx
 ┣ constants
 ┃ ┗ .gitkeep
 ┣ context
 ┃ ┗ .gitkeep
 ┣ hooks
 ┃ ┗ .gitkeep
 ┣ styles
 ┃ ┣ abstracts
 ┃ ┃ ┣ _functions.scss
 ┃ ┃ ┣ _mixins.scss
 ┃ ┃ ┗ _variables.scss
 ┃ ┣ base
 ┃ ┃ ┣ _base.scss
 ┃ ┃ ┗ _typography.scss
 ┃ ┗ app.scss
 ┣ types
 ┃ ┣ api
 ┃ ┃ ┗ .gitkeep
 ┃ ┣ context
 ┃ ┃ ┗ .gitkeep
 ┃ ┗ elements
 ┃ ┃ ┗ .gitkeep
 ┗ utils
 ┃ ┗ .gitkeep


pages
 ┣ 404.tsx
 ┣ _app.tsx
 ┣ _document.tsx
 ┣ _error.tsx
 ┗ index.tsx

public
 ┣ images
 ┃ ┗ post.jpg
 ┣ favicon.ico
 ┗ robots.txt

test
 ┣ fixtures
 ┃ ┗ .gitkeep
 ┣ spec
 ┃ ┣ e2e
 ┃ ┃ ┗ SocialMedia.ts
 ┃ ┗ integration
 ┃ ┃ ┗ .gitkeep
 ┗ support
 ┃ ┣ commands
 ┃ ┃ ┗ getElement.ts
 ┃ ┗ index.ts

 
읽어주셔서 감사합니다 :D