Next.js의 폴더 구조 살펴보기

 

 

 

안녕하세요 오늘은 Next.js의 폴더 구조를 알아보겠습니다.

 

Next.js 13 버전 이후부터 app 디렉토리 기반의 새로운 라우팅 시스템을 도입했습니다. 이는 기존의 pages 디렉토리 기반 라우팅 시스템과는 조금 다르며, 더욱 유연하고 효율적인 방식으로 라우팅을 처리합니다. app 디렉토리를 사용하면서도 프로젝트 구조를 적절하게 유지하려면 다음과 같은 방식으로 관리할 수 있습니다.

 

src/
├── app/            # Next.js 13의 새로운 라우팅 시스템을 사용
│   ├── layout.tsx  # 공통 레이아웃 파일
│   ├── page.tsx    # 기본 루트 페이지 (루트 경로 '/')
│   ├── posts/      # 'posts' 경로 관련 페이지들
│   │   └── page.tsx # '/posts' 경로에 대한 페이지
│   └── api/        # API 라우트 (app 기반의 API 라우트)
├── lib/            # 유틸리티 및 외부 라이브러리 설정 (e.g., mongodb.js, firebase.js 등)
├── models/         # 데이터베이스 모델 정의 (e.g., Post.js, User.js 등)
├── components/     # React 컴포넌트들
├── styles/         # 전역 및 모듈화된 스타일 파일들
├── utils/          # 공통 유틸리티 함수

 

상세 설명

1. app/ 디렉토리 구조

• app/: Next.js 13부터 도입된 새로운 구조로, 페이지 기반 라우팅 대신 폴더 기반 라우팅을 사용합니다. app 디렉토리 하위의 각 폴더는 라우트 경로와 매칭되며, page.tsx 파일이 해당 라우트의 페이지 컴포넌트 역할을 합니다.
• layout.tsx: 특정 라우트의 공통 레이아웃을 지정할 때 사용합니다. app 디렉토리에서 최상위 레이아웃을 지정할 수 있으며, 이 파일은 모든 페이지에 공통적으로 적용됩니다.
• page.tsx: 각 폴더 내에 page.tsx 파일을 만들면 해당 경로의 페이지가 렌더링됩니다. 예를 들어 app/posts/page.tsx는 /posts 경로에 해당하는 페이지를 담당합니다.
• api/: app 디렉토리 내에서 API 라우트를 정의할 수 있으며, api/ 폴더를 통해 RESTful API를 정의할 수 있습니다. 기존의 pages/api/와 유사하게 사용할 수 있지만, 새로운 app 라우팅 시스템과 통합됩니다.

2. lib/, models/, components/ 등 나머지 디렉토리

• lib/: 데이터베이스 연결 파일(mongodb.js), Firebase 설정 파일 등 외부 라이브러리와 관련된 설정을 여기에 둡니다.
• models/: MongoDB의 Mongoose 모델을 정의하는 곳입니다. 예를 들어, Post.js, User.js 등의 데이터베이스 스키마를 정의합니다.
• components/: 재사용 가능한 React 컴포넌트들을 여기에 배치합니다. 예를 들어, 버튼, 네비게이션 바, 폼과 같은 UI 컴포넌트가 여기에 들어갑니다.
• styles/: CSS 파일을 저장하는 폴더로, 전역 스타일 또는 모듈화된 스타일 파일들이 여기에 위치합니다.
• utils/: 공통으로 사용되는 유틸리티 함수들을 여기에 정의합니다. 예를 들어, 날짜 포맷팅, 문자열 처리 함수 등이 들어갈 수 있습니다.