Next.js 로 프로젝트를 생성하기 전 폴더 구조는 어떤식으로 구성 해야할까요?
폴더구조는 프로젝트의 상황에 따라 달라지겠지만 폴더들의 사용목적, 방식에 대해 알아보겠습니다.
✅ 폴더 구조
1) public 폴더
Next.js 공식문서에서 말하는 public
public폴더는 이미지, 글꼴 등과 같은 정적 자산을 저장할 폴더를 만듭니다.- public 그런 다음
기본 URL( )에서 시작하는 코드에서 디렉터리 내의 파일을 참조할 수 있습니다.
2) src 폴더
- 모든 코드는 이 폴더를
root로 가지고 있기 때문에 폴더를 아래처럼 분리하게 되면src는 거의 필수
3) app 폴더
Next 14 버전부터App router를 사용합니다.- Next가
app폴더내의pages.tsx를 라우트 정의 파일로 판단하여 그에 맞게 작업을 실행한다.
3) style 폴더
src폴더 하위, src가 없다면root하위에style폴더를 만들어서 스타일과 관련된 파일을 관리한다.global.css: src/app/layout.tsx에서 import하여 전체 프로젝트 적용하여 사용animation.css:animation에서 사용하는keyframe을 모아둔 파일
4) container 폴더
- 데이터 로직과 상태 관리를 처리하는 컨테이너 컴포넌트를 담는 곳
데이터 로딩 및 가공:외부 API로부터 데이터를 가져오거나, 데이터를 가공하여UI 컴포넌트에 전달하는 역할상태 관리: 상태 관리 라이브러리와 통합하여 전역 상태를 관리하는 컴포넌트들이 위치할 수 있습니다. 이러한 컴포넌트들은 전역 상태를 유지하고, 필요한 경우 상태를 변경하여 UI에 반영하는 역할을 수행비즈니스 로직 처리: UI에 관련된 비즈니스 로직을 처리하는 컴포넌트들이 위치(사용자 인증, 권한 관리, 데이터 유효성 검사 등의 작업을 수행하는 컴포넌트)
5) component 폴더
container가 좀 큰 단위였다면component는 기복적인 UI가 들어가는 폴더- 각 컴포넌트는 작고 독립적이어야 합니다. 주로 다음과 같은 종류의 컴포넌트가 이 폴더에 위치할 수 있다.
UI 요소: 버튼, 입력 필드, 체크박스, 라디오 버튼 등과 같은 일반적인 UI 요소레이아웃 컴포넌트: 페이지의 레이아웃을 구성하는 컴포넌트들이 위치(헤더, 푸터, 사이드바, 네비게이션 바)페이지 섹션: 여러 페이지에서 공통적으로 사용되는 섹션들을 컴포넌트로 분리하여 재사용가능 (제품 목록, 블로그 게시물 목록, 사용자 프로필 등의 섹션)
6) data 폴더
- 여러 컴포넌트에서 사용되는 공통된 데이터를 관리할 때 사용하는 폴더
7) utils 폴더
- 하나의 페이지만이 아닌 프로젝트에 전반적으로 사용되는 기능과 관련된 코드를 관리하는 폴더
- 자주 사용되는 함수들을 모듈화하여 중복을 피하고 재사용성을 높이는데 유용
Helper함수: 프로젝트에서 자주 사용되는 작은 기능을 포함하는 함수들이 위치(날짜형식 변환, 문자열조작, 데이터변환들)유틸리티 함수: 다양한 유틸리티 함수들이 위치 (파일 조작, 네트워크 요청, 데이터 유효성 검사 등을 수행하는 함수들)상수 정의: 프로젝트 전반에서 사용되는 상수 값들을 정의하는 파일이 위치할 수 있습니다.
9) middleware
https://nextjs.org/docs/app/building-your-application/routing/middleware
- Next.js에서 페이지를 렌더링 하기 전 서버 측에서 실행되는 함수로 아주 중요하다.
- 페이지 렌더링 전 인증요청, 확인 할 때
- 요청 데이터를 사전에 처리, 특정 API요청을 수행하거나 캐시관리
산은 산, 물은 물, 코드는 코드