Next.js 폴더 및 파일 구조
Root
.env
.env .env.local .env.development .env.copy
- 환경별로 달라질 수 있는 값을 적는 용도
ex) 개발 환경과 프로덕션 환경의 백엔드 엔드포인트 주소 - 비밀스러운 정보를 은닉할 때
ex) GITHUB_ACCESS_TOKEN이나 SPACES_SECRET 등
주의할 점
.env 파일은 반드시 .gitignore 처리가 되어있어야 한다.
# local env files
.env
.env*.local/public
Create React App과 다르게 Next.js에서는 public 폴더에 이미지와 같은 리소스들을 저장해둘 것을 권장한다.
- Create React App : public 폴더는 프로젝트 외곽의 무엇이다.
- Next.js : public 폴더도 프로젝트 번들의 일부이다.
/public/fonts
폰트만 넣어놓는 용도
/public/svgs
SVG 파일만 넣어놓는 용도
/public/images
이미지만 넣어놓는 용도
/src/app
/app
/components
/constants
/containers- app 폴더에는 라우팅 관련 파일만 정의 (page.tsx, layout.tsx, opengraph-image.tsx 등)
- 그 외에 page.tsx 안에서 보여줄 컨텐츠 (컴포넌트 안의 스타일 및 다른 코드들)는 containers 폴더에 정의하고 page.tsx에서 import로 가져와서 사용
src/containers
- app 폴더에서 불러온 컴포넌트들
- 각 페이지에서 사용하는 컴포넌트를 모아둠
- tsx, css, state, hooks
src/components
- containers보다 조금 더 큰 개념
- 여러 페이지에서 공통으로 사용할 수 있는 컴포넌트를 모아둠
- src/containers에서 만들었던 컴포넌트를 다른 곳에서도 사용하게 되면 이 폴더로 이동하게 됨
ex) @/components/Loding, @/components/Button
src/constants
여러 페이지에서 공통으로 사용하게 될 수 있는 상수값
src/hooks
페이지 곳곳에서 사용되는 공통 훅들
ex) useAlert 같은 건 곳곳에서 사용되기 때문에 특정 container 안에 넣어두기는 애매하여 이곳에 위치
src/libs
- 외부 라이브러리
- 보통은 package.json으로 의존성 설치를 하므로 거의 쓸 일은 없지만, 종종 튜닝해서 쓰는 경우 수정하여 이곳에 위치
src/services
각종 API 요청들이 위치
src/states
- 페이지 곳곳에서 사용될 state들
- 이 곳이 최대한 적어야 서비스의 유지보수성이 올라감
- 전역 상태관리를 최대한 배제하는 것이 좋음
- 실무에서 꼭 사용이 필요한 경우 곰곰히 생각해보고 사용할 것
- 사용자 로그인 정보의 경우 react-query의 캐시에 담아서 사용하면 되므로 상태 관리가 따로 필요없음
src/styles
- 스타일 시트 관련 공통 요소들
global.scss
- src/app/layout.tsx에서 import하여 전체에 적용
- 웹폰트 선언 파일, 주로 쓰는 컬러값, CSS 리셋이나 각종 상수 값들
levels.scss
- 각종 z-index 값들
variable.scss
- 그외 다양한 종류의 CSS variable
- 온갖 종류의 컬러와 수치 정보를 모아두는 용도
animations.scss
- 곳곳에서 사용하는 키프레임을 모아두는 용도
- @keyframes로 시작되는 코드들은 한곳에 모아놔야 나중에 코드를 중복 사용하는 문제를 방지할 수 있음
src/types
- 각종 타입스크립트 타입 정의들
- ts는 한 번 정의가 잘 되어 있으면 리팩토링할때 아주 편할 것
src/utils
- 곳곳에서 사용하는 유틸성 함수들을 넣어서 관리
참조링크
삽질 전문가