1. 폴더 구조

 

/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

 

 

'Next.js 개발 가이드 > 01. Set up' 카테고리의 다른 글

7. Set up - ESLint, Prettier [보완]  (1) 2024.01.15
6. Set up - 환경 및 metadata  (0) 2023.12.14
5. Set up - Tailwind CSS  (0) 2023.12.14
4. Set up - ESLint, Prettier  (0) 2023.12.14
3. Set up - typescript  (0) 2023.12.14
  • 네이버 블로그 공유
  • 네이버 밴드 공유
  • 페이스북 공유