프로젝트 구조 이해하기
Next.js 14 프로젝트의 구조를 이해하는 것은 효율적인 개발을 위해 중요합니다.
이 절에서는 프로젝트의 주요 디렉토리와 파일, 그리고 그들의 역할에 대해 자세히 알아보겠습니다.
주요 디렉토리 및 파일
Next.js 프로젝트의 기본 구조는 다음과 같습니다.
| 디렉토리/파일 | 목적 |
|---|---|
/app | App Router를 위한 주요 디렉토리. 페이지, 레이아웃, 라우팅 관련 파일들이 위치합니다. |
/public | 정적 파일(이미지, 폰트 등)을 위한 디렉토리. 이 디렉토리의 파일들은 웹 루트에서 직접 접근 가능합니다. |
/components | 재사용 가능한 React 컴포넌트들을 저장하는 디렉토리. (선택적) |
/lib or /utils | 유틸리티 함수나 helper 모듈을 저장하는 디렉토리. (선택적) |
/styles | 전역 스타일이나 CSS 모듈을 저장하는 디렉토리. (선택적) |
next.config.js | Next.js 설정 파일. 환경 변수, 웹팩 설정 등을 커스터마이즈할 수 있습니다. |
package.json | 프로젝트 메타데이터와 의존성 목록을 포함하는 파일. |
tsconfig.json | TypeScript 설정 파일. (TypeScript 사용 시) |
.eslintrc.json | ESLint 설정 파일. 코드 스타일과 품질을 관리합니다. |
.gitignore | Git이 추적하지 않을 파일과 디렉토리를 지정하는 파일. |
app 디렉토리 구조
App Router를 사용하는 Next.js 14에서 /app 디렉토리는 특히 중요합니다.
이 디렉토리의 구조를 자세히 살펴보겠습니다.
앱 라우터 구조
layout.js: 여러 페이지에서 공유되는 UI를 정의합니다.page.js: 라우트의 고유한 UI를 정의합니다.loading.js: 페이지나 컴포넌트가 로딩 중일 때 표시될 UI를 정의합니다.error.js: 에러 발생 시 표시될 UI를 정의합니다.not-found.js: 404 Not Found 에러 시 표시될 UI를 정의합니다.route.js: API 엔드포인트를 정의합니다.
중첩된 라우트는 하위 디렉토리로 표현되며, 각 디렉토리는 자체 layout.js와 page.js를 가질 수 있습니다.
데이터 페칭과의 연결
이 프로젝트 구조는 6장의 데이터 페칭 부분과 밀접하게 연관됩니다.
Next.js 14에서는 app 디렉토리 내의 컴포넌트에서 직접 데이터를 페칭할 수 있습니다.
예를 들어
page.js파일에서 서버 컴포넌트를 사용하여 데이터를 페칭하고 렌더링할 수 있습니다.layout.js에서 여러 페이지에서 공유되는 데이터를 페칭할 수 있습니다.loading.js를 사용하여 데이터 페칭 중 로딩 상태를 표시할 수 있습니다.
이러한 구조는 코드의 구조와 데이터 흐름을 더 명확하게 만들어, 대규모 애플리케이션에서의 개발과 유지보수를 용이하게 합니다.
프로젝트 구조 변경 예제
프로젝트 구조를 변경하거나 확장하는 간단한 예제 task를 수행해 보겠습니다.
1. 블로그 포스트를 위한 새로운 라우트 추가하기
app/
├── blog/
│ ├── [slug]/
│ │ └── page.js
│ ├── layout.js
│ └── page.js 이 구조는 /blog 경로와 동적 라우트 /blog/[slug]를 생성합니다.
2. 공통 컴포넌트 디렉토리 추가하기
components/
├── Header/
│ ├── Header.js
│ └── Header.module.css
├── Footer/
│ ├── Footer.js
│ └── Footer.module.css
└── Layout/
└── Layout.js이 구조는 재사용 가능한 컴포넌트를 organizeSet하는 데 도움이 됩니다.
3. API 라우트 추가하기
app/
├── api/
│ └── posts/
│ └── route.js 이 파일은 /api/posts 엔드포인트를 처리합니다.
이러한 변경을 통해 프로젝트의 구조를 확장하고, 더 복잡한 애플리케이션을 구축할 수 있는 기반을 마련할 수 있습니다.
프로젝트 구조를 잘 이해하고 효율적으로 관리하면, 확장 가능하고 유지보수가 용이한 Next.js 애플리케이션을 개발할 수 있습니다.
이 구조는 컴포넌트, 페이지, API 등을 논리적으로 organizationSet하여 개발 프로세스를 간소화하고 팀 협업을 촉진합니다.