Next.js 기본 프로젝트 파일 및 디렉토리 용도

Next.js 프로젝트 생성 시 기본적으로 생성되는 파일 및 디렉토리는 애플리케이션의 구조와 설정을 담당합니다. Next.js 13 버전부터 기본값으로 제공되는 App Router를 기준으로 설명해 드리겠습니다.

---

https://stackblitz.com/edit/stackblitz-starters-adnafygg?file=app%2Fpage.tsx

start-default - StackBlitz

스택블리츠로 프로젝트 생성했을 때 스타트디폴트 코드 입니다.

생성하고 아무것도 안한 상태 입니다.

위 코드를 기본을 아래 매뉴얼을 참고하면 됩니다.

---

Next.js 기본 프로젝트 파일 및 디렉토리 용도

---

새로운 Next.js 프로젝트를 생성하면 다음과 같은 주요 파일과 디렉토리들이 구성됩니다.

---

.next 디렉토리 (자동 생성)

 

용도: 

Next.js 빌드 시 생성되는 모든 결과물(빌드된 코드, 캐시 등)이 저장되는 디렉토리입니다. 

개발자가 직접 수정하지 않으며, 배포 시 중요한 역할을 합니다.

---

node_modules 디렉토리 (자동 생성)

용도: 프로젝트에 필요한 모든 외부 라이브러리(패키지)들이 설치되는 디렉토리입니다. 

npm install 또는 yarn install 명령어를 실행하면 이 디렉토리에 종속성들이 설치됩니다.

---

public 디렉토리

용도: 

이미지, 폰트 등 정적인 파일들을 저장하는 디렉토리입니다. 

웹 애플리케이션에 의해 직접 제공되며, 코드를 통해 특별한 처리 없이 웹 접근이 가능합니다. 

예를 들어, /public/my-image.png는 /my-image.png 경로로 접근할 수 있습니다.

주요 파일:
favicon.ico: 웹사이트의 아이콘입니다. 브라우저 탭에 표시됩니다.

---

app 디렉토리

용도: 

Next.js 13부터 도입된 App Router 방식의 핵심 디렉토리입니다. 

모든 라우트(URL 경로)와 관련된 파일들이 이 디렉토리 안에 구성됩니다.

주요 파일:

layout.js (또는 layout.tsx): 

최상위 레이아웃 파일입니다. 

모든 페이지에 공통적으로 적용되는 UI(예: 헤더, 푸터, 내비게이션 바 등)를 정의합니다. 

children 속성을 받아 하위 페이지 내용을 렌더링합니다.

page.js (또는 page.tsx): 

최상위 페이지 파일입니다. 

루트 URL (/)에 접근했을 때 사용자에게 보여줄 페이지의 콘텐츠를 정의합니다. 

Next.js에서 라우트를 형성하기 위한 필수적인 파일입니다.

globals.css: 

애플리케이션 전체에 적용되는 글로벌 CSS 스타일을 정의하는 파일입니다. 이 파일에 정의된 스타일은 모든 컴포넌트와 페이지에 영향을 미칩니다.

---

.gitignore 파일

용도: 

버전 관리 시스템(Git)에서 추적하지 않을 파일이나 디렉토리를 지정하는 파일입니다. 

주로 .next, node_modules, .env 파일 등이 포함되어 불필요한 파일들이 저장소에 커밋되지 않도록 합니다.

---

next.config.js (또는 next.config.mjs)

용도: 

Next.js 애플리케이션의 동작 방식을 사용자 정의하기 위한 설정 파일입니다. 

빌드 설정, 이미지 최적화, 환경 변수 등 다양한 옵션을 여기에 정의할 수 있습니다.

---

package.json 파일

용도: 

프로젝트의 메타데이터와 의존성(dependencies) 및 스크립트를 정의하는 파일입니다. 

npm install 명령어가 이 파일을 기반으로 라이브러리를 설치하며, npm run dev, npm run build 등의 명령어가 이 파일에 정의된 스크립트를 실행합니다.

---

README.md 파일

용도: 프로젝트에 대한 설명, 설치 방법, 실행 방법 등 기본적인 정보를 담는 문서 파일입니다. 

보통 Markdown 형식으로 작성됩니다.

---

postcss.config.js (선택적)

용도: 

PostCSS 관련 설정을 정의하는 파일입니다. 

CSS 전처리를 위한 도구로, 주로 Tailwind CSS와 같은 유틸리티 우선 CSS 프레임워크와 함께 사용됩니다.

---

tailwind.config.ts (선택적)

용도: 

Tailwind CSS를 사용하는 경우, Tailwind CSS의 테마, 색상, 유틸리티 클래스 등을 사용자 정의하기 위한 설정 파일입니다.

---

jsconfig.json 또는 tsconfig.json (선택적)

용도: 

JavaScript (JSConfig) 또는 TypeScript (TSConfig) 프로젝트 설정을 위한 파일입니다. 

모듈 해석 방식, 컴파일 옵션 등을 지정하여 개발 환경을 최적화합니다. 

create-next-app 시 TypeScript를 선택하면 tsconfig.json이 생성됩니다.

---

---

이러한 파일들은 Next.js 프로젝트의 기본적인 뼈대를 형성하며, 웹 애플리케이션 개발에 필요한 환경을 제공합니다. 각 파일의 역할은 애플리케이션의 특정 측면을 관리하여 개발 효율성과 유지보수성을 높이는 데 기여합니다.

---