[Next.js] Next.js + TypeScript 폴더구조

💡 React 단점

- CSR이기 때문에 포털사이트 크롤링 봇들이 React 페이지를 수집하지 못함
- SEO(검색엔진 최적화) 적용 불가

따라서 SSR을 지원하는 Next.js 사용 !

 

프로젝트 생성

• yarn create next-app
• yarn dev

 

Next.js 에 Typescript 적용

• next-env.d.ts 파일 생성
• yarn add --dev typescript @types/react @types/node

 

프로젝트 폴더 구조

apis

• API를 모아 놓은 폴더
• *.ts 형태의 파일 관리
• 페이지 또는 도메인 별로 ts 파일들을 관리할 수 있다.

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

components

• 컴포넌트들을 관리하는 폴더
• 규칙에 따라 다양하게 적용

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
- 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

styles.tsx를 페이지로 인식하지 않기 위해 *.page.tsx 네이밍 룰 사용

• 페이지 파일 형태 설정

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

next.config.js Options: pageExtensions | Next.js

public

• 정적 파일들을 관리하는 폴더
• css, font, image 파일들 관리

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

• util들을 모아놓은 폴더
• 스토리지 관련 함수, 날짜 변환 함수, 등등 …