[Next.js] Next.js 프로젝트 폴더 구조 잡기

프로젝트를 만들고 개발을 진행하다 보면, 파일이 점진적으로 늘어나면서, 폴더 구조를 어떻게 잡아야 하는 지에 대한 고민이 생기곤 합니다. 작은 프로젝트면 폴더 구조를 바로바로 바꿀 수도 있지만, 규모가 어느 정도 커지면 폴더 구조를 변경하기 어렵게 됩니다.

 

 

여러 프로젝트를 진행하면서, 저는 나름대로 폴더 구조를 다음과 같이 구성해야 겠다고 결정을 했습니다.

아래는 VSCODE 에디터에 캡쳐한 사진입니다.

 

 

Next.js 폴더 구조

 

- apis

- components

- constants

- containers

- fixtures

- hooks

- interfaces

- pages

- public

- slices

- styles

- utils

 

 

 

apis

API 들을 모아 놓은 폴더입니다.

타입스크립트를 사용한다면, *.ts 형태의 파일들이 폴더 안에 들어 있게 됩니다.

페이지 또는 도메인 별로 ts 파일들을 관리할 수 있습니다.

 

apis
- main.ts
- auth.ts
...

 

 

 

components

컴포넌트들을 관리하는 폴더입니다.

하위 구조도 개인 or 회사의 규칙에 따라 다양하게 적용될 수 있습니다.

Atomic 디자인 패턴을 적용하는 곳도 있고요.

 

components
- common
	- Alert
    	- index.tsx
        - styles.tsx
- main
	- Acomponent
    	- index.tsx
        - styles.tsx
- auth
	- Bcomponent
    	- index.tsx
        - styles.tsx

 

// pages 폴더를 추가해서 페이지별 컴포넌트를 관리하는 방법

components
- common
	- Alert
    	- index.tsx
        - styles.tsx
        
- pages
	- main
        - Acomponent
            - index.tsx
            - styles.tsx
    - auth
        - Bcomponent
            - index.tsx
            - styles.tsx

 

 

 

constants

상수값을 관리하는 폴더입니다.

- API 도메인 주소라던가

- 기본 이미지 URL

- 스토리지 Key 값

 

... 등을 관리할 수 있습니다.

 

 

 

containers

컨테이너 파일들을 관리하는 폴더입니다.

컨테이너 패턴을 사용한다면 필수적으로 사용할 것입니다.

components 폴더와 구조가 비슷합니다.

 

 

 

fixtures (optional)

상태의 초기값이나 Mock 데이터를 관리하는 데 사용합니다.

 

 

 

hooks

hooks 함수를 관리하는 폴더입니다.

use~.ts 형태의 파일들이 들어 있는데요.

hooks 함수도 공통적으로 사용하는 것들이 있어서 폴더를 따로 구분해줄 수 있습니다.

 

 

hooks
- common
	- useAlert.ts
    - useAuth.ts
    
- useName1.ts
- useName2.ts

 

 

 

interfaces

인터페이스 및 타입을 관리하는 폴더입니다.

페이지 또는 도메인 별로 *.ts 파일들을 관리합니다.

 

 

 

pages

Next.js에서 필수적으로 사용되는 폴더입니다.

하위 폴더 & 파일들은 페이지를 가리키는 데요.

저의 경우에는 페이지 파일은 *.page.tsx 형태로 관리하고 있습니다.

 

pages
- main
	- index.page.tsx
    - styles.tsx
- auth
	- index.page.tsx
    - styles.tsx

 

그 이유는 페이지 폴더 안에 페이지에 사용할 스타일들을 관리하기 위해서인데요.

만약, 페이지 파일을 *.page.tsx 형태로 설정하지 않으면, styles.tsx를 페이지로 인식합니다. 

보통 styles.tsx 파일 안에서 스타일 컴포넌트를 사용하는 데요.

페이지 파일명이 *.tsx로 설정되어 있으면, 스타일 컴포넌트를 export 하는 과정에서도 에러가 발생합니다.

 

 

 

next.config.js: Custom Page Extensions | Next.js

페이지 파일 형태를 설정하는 것은 위의 링크에서 확인하실 수 있습니다.

*.page.tsx 형태말고, 본인이 원하는 형태로 커스터마이징 하실 수 있습니다.

 

 

 

public

정적 파일들을 관리하는 폴더입니다.

css 파일, font 파일, 이미지 파일을 관리할 수 있습니다.

 

public
- normalize.css
- images
	- image1.png
    - image2.png

 

// page별로 관리할 수도 있습니다.

public
- pages
	- main
    	- image1.png
        - image2.png
    - auth
    	- image1.png
        - image2.png

 

 

 

slices (optional)

Redux-Toolkit의 slice를 관리하는 폴더인데요.

recoil을 사용한다면 폴더명이 바뀌겠죠?

사용하시는 상태 라이브러리에 맞게 폴더명 & 구조가 바뀔 것입니다.

 

 

 

styles

스타일 파일을 관리하는 폴더입니다.

공통적으로 사용되는 스타일을 관리할 수 있습니다.

 

 

 

utils

유틸들을 모아놓은 폴더입니다.

 

예를 들어,

- 스토리지 관련 함수

- 날짜 변환 함수

 

등... 의 것들이 있습니다.

 

 

 

 

 

제가 자주 사용하는 프로젝트 폴더 구조를 설명해드렸는데요.

다른 분들은 어떻게 폴더 구조를 설계하시는 지도 궁금하네요.

 

더 좋은 구조가 있으시면 댓글로 알려주세요~!

 

 

 

Next.js 보일러 플레이트도 만들었는데, 필요하신 분들 사용하세요 ㅎㅎ

GitHub - CheolWoongChoi/Next_Starter: Next.js Starter-kit