Next.js 개발 가이드/01. Set up
1. 폴더 구조
Tech김백엔드
2024. 1. 20. 21:44
| /x2bee-storefront | |||||
| src | |||||
| api | |||||
| common | 공통 api | ||||
| display | 전시 api | ||||
| event | 이벤트 api | ||||
| goods | 상품 api | ||||
| member | 회원 api | ||||
| order | 주문 api | ||||
| search | 검색 api | ||||
| app | |||||
| (root) | App router의 folder-based routing | ||||
| layout.tsx | common layout | ||||
| (home) | root 폴더 | ||||
| page.tsx | Main Page | ||||
| display | 예시) App router의 folder-based routing | ||||
| … | 기타 folder-based routing | ||||
| my-cart | 예시) MO 환경에서 Footer layout을 다르게 가져갈 라우트 | ||||
| layout.tsx | 장바구니 layout (shopping-bag는 한섬 전용 용어라 my-cart으로 변경) | ||||
| my-page | 예시) MO 환경에서 Footer layout을 다르게 가져갈 라우트 | ||||
| layout.tsx | 마이페이지 layout | ||||
| goods-detail | 예시) MO 환경에서 Footer layout을 다르게 가져갈 라우트 | ||||
| layout.tsx | 상품 상세 layout | ||||
| [slug] | page.tsx | 각 상품별 상세페이지 | |||
| ui | UI Guide - 임시 (퍼블 전용) | ||||
| constants | 여러 페이지에서 공통으로 사용하게 될 상수 | ||||
| components | app 폴더와 관련된 각각의 재사용 가능한 component를 정의함 | ||||
| header | src/components 폴더 예시 : header nav bar | ||||
| footer | src/components 폴더 예시 : footer | ||||
| ui | ui component (button, calender, accordion 등) | ||||
| … | 기타 component 추가 | ||||
| hooks | custom hooks | ||||
| lib | plugins, 각종 library | ||||
| store | Zustand state를 관리 | ||||
| types | Typescript를 위해 type 선언용 폴더 | ||||
| favicon.ico | favicon | ||||
| layout.tsx | Root Layout | ||||
| public | 공통 assets | ||||
| fonts | font 관련 파일 | ||||
| images | image 파일 (svg파일과 icon 파일 포함) | ||||
| styles | globals.css에 포함되는 각종 css 파일 | ||||
| globals.css | reset CSS를 포함 tailwind CSS를 위한 메인 css 파일 | ||||
| *.css | 기타 재사용 할 CSS | ||||
| .env.development.local | npm run dev (local 빌드용 환경 설정 파일) | ||||
| .env.production.local | npm run build (배포 빌드를 위한 환경 설정 파일) | ||||
| .eslintrc.json | ESLint 설정 및 ESLint에 제외되는 규칙 설정 | ||||
| .gitignore | git commit에서 제외되는 파일 목록 | ||||
| .pretterrc | ESLint와 Prettier 충돌 방지용 Prettier 설정 | ||||
| next-env.d.ts | Next.js의 Typescript 선언용 파일 | ||||
| next.config.js | Next.js config 설정 | ||||
| package.json | 각종 패키지 / dependency 정보 | ||||
| README.md | gitlab용 readme 파일 | ||||
| tailwind.config.ts | tailwind css를 위한 config | ||||