Next.js 프로젝트 디렉토리 구조

CNA(create next-app)으로 Next.js 프로젝트를 생성할 경우 기본적으로 생성되는 디렉토리들은 아래와 같다.

 

• public: 정적자원의 root 디렉토리이다. 
• styles: 정적자원 중 css 파일을 별도로 보관하는 디렉토리로 보인다. 아마도 global css를 보관할 거 같다. 
• pages: 넥스트의 파일구조 라우팅 기능을 담당하는 디렉토리로 간단하게 apache 의 documentRoot와 비슷하게 생각하면 된다.

public 디렉토리에 test.png 파일을 보관할 경우 html에서 /test.png 로 접근할 수 있다. 주의할 점은 랜더링이 완료된 html에서만 접근이 가능하다는 것이다.

 

랜더링 전 파일 내에서 improt 로 참조할 경우에는 해당되지 않는다. 기본적으로 상대경로 접근할 수 있으며 절대경로 설정을 했다면 절대경로로도 접근 가능하다.

 

public 디렉토리의 이러한 특징이 styles 에도 적용되는지는 잘 모르겠는데 추후 link 태그 사용시 테스트 해봐야 할 것 같다.

 

일단 public, styles 는 기존에 존재하던 것을 그대로 활용하는게 좋을 거 같고 그 외 에는 아래와 같이 구성해서 사용하는게 좋아보인다.

├──public
├──src
│  ├── common
│  │   ├── config
│  │   ├── redux
│  │   ├── rest
│  │   └── util
│  ├── components
│  └── pages
└──styles

 

src 디렉토리를 추가로 생성해서 js, jsx, ts, tsx 와 같은 리액트 파일들을 보관한다.

 

src/common 디렉토리를 하위에 설정파일들을 두기 위한 config 디렉토리와 Ducks 패턴 리덕스 관련 파일들을 두기위한 redux 디렉토리, axios를 이용하여 서버와의 rest 통신 관련 코드를 두기 위한 rest 디렉토리, 유틸을 두기위한 util 디렉토리를 추가로 생성했다.

 

src/components 디렉토리에는 페이지를 구성할 컴포넌트 파일들을 보관한다.

 

기존에 있던 pages 디렉토리도 src 디렉토리 하위로 이동시켰다. 참고로 Next.js 9버전부터 pages 디렉토리는 src 디렉토리 하위에서도 제 역할을 하도록 공식적으로 지원해주고 있다. Next.js ‘src’ directory support

 

아직 Next.js 경험이 많지 않기 때문에 기본적인 디렉토리만 생성하였고 이는 추후 더 보강될 수 있다. 참고로 src 디렉토리 하위에 둘 javascript 파일의 경우 보다 직관적으로 export, import 하려면 절대경로 설정을 해주는게 좋은데 타입스크립트 환경에서의 절대경로 설정 방법은 아래 기록해 두었다.

https://findmypiece.tistory.com/203?category=989885