기본적인 Page Router 기반 Next.js 폴더 구조

1. pages/
   • Next.js는 이 폴더 내의 파일을 기반으로 자동 생성된 라우트를 지원합니다.
   • 예를 들어, pages/about.js는 /about URL에 대응되고, pages/index.js는 루트 경로(/)에 대응됩니다.
2. pages/api/
   • API 라우트를 위한 폴더입니다. 서버리스 함수로 동작하며, 서버 사이드 코드를 작성할 수 있습니다.
   • 예: pages/api/users.js는 /api/users 엔드포인트로 동작합니다.
3. public/
   • 정적 파일(js, css, img 등)을 호스팅하는 폴더로, URL을 통해 / 경로를 기준으로 접근할 수 있습니다.
   • 예: public/images/avatar.png는 /images/avatar.png로 접근합니다.
4. styles/
   • 전역 및 모듈 CSS 파일을 위한 폴더입니다.
   • styles/globals.css는 애플리케이션 전역에 적용됩니다.
5. components/
   • 재사용 가능한 React 컴포넌트를 저장하는 폴더입니다.
   • Header, Footer, Sidebar 등의 UI 컴포넌트를 여기에서 관리합니다.
6. lib/
   • 외부 API와 상호작용하거나 데이터베이스 클라이언트를 초기화하는 모듈을 넣습니다.
   • 예: 데이터베이스 연결 설정 코드.
7. hooks/
   • 커스텀 React hooks를 정의하는 폴더입니다.
   • React 상태 관리나 로직을 재사용하기 위한 커스텀 훅을 사용할 수 있습니다.
8. context/
   • React Context API를 사용하여 전역 상태를 관리하기 위한 컨텍스트 파일을 저장합니다.
9. models/
   • 데이터 스키마나 ORM을 사용하는 경우 모델 정의 파일을 저장합니다.
   • 예: MongoDB Mongoose 스키마.
10. utils/
    • 유틸리티 함수나 상수를 정의하는 파일을 위한 폴더입니다.
    • 예: 도우미 함수(helpers.js), 정규 표현식 또는 상수(constants.js) 등.

예제 폴더 구조

my-nextjs-project/
│
├── components/
│   ├── styles/
│   │   └── exampleStyles.ts // styled-components 파일 분리
│   ├── Header.js
│   └── Footer.js
│
├── context/
│   └── AuthContext.js
│
├── hooks/
│   └── useAuth.js
│
├── lib/
│   └── db.js
│
├── models/
│   └── User.js
│
├── pages/
│   ├── api/
│   │   ├── users.js
│   │   └── auth.js
│   ├── index.js
│   ├── about.js
│   └── contact.js
│
├── public/
│   └── images/
│       └── avatar.png
│
├── styles/
│   ├── globals.css
│   └── Home.module.css
│
└── utils/
    ├── helpers.js
    └── constants.js