Next.JS 폴더구조 (Page Router & App Router)
최종 수정일 : 2024-07-22
Next.JS 폴더구조 (Page Router & App Router)
1. Page Router
my-next-app/
├── public/
│ ├── favicon.ico
│ └── images/
├── src/
│ ├── components/
│ │ └── MyComponent.js
│ ├── pages/
│ │ ├── api/
│ │ │ └── hello.js
│ │ ├── _app.js
│ │ ├── _document.js
│ │ ├── index.js
│ │ └── about.js
│ ├── styles/
│ │ ├── globals.css
│ │ └── Home.module.css
│ └── utils/
│ └── helpers.js
├── .eslintrc.js
├── .gitignore
├── next.config.js
├── package.json
└── README.mdpublic
정적 파일을 저장하는 폴더이며 루트 URL을 통해 접근 가능하다.
src
소스 코드를 저장하는 폴더이며, 필수는 아니지만 코드와 설정 파일을 분리하기 위해 사용하기도 한다.
src/components
재사용 가능한 React 컴포넌트를 저장하는 폴더
src/pages
페이지 컴포넌트를 저장하는 폴더이며, 이 폴더의 파일들을 기반으로 자동으로 라우트를 생성한다.
src/pages/api
API 엔드포인트를 정의하는 폴더이며, pages/api 폴더 안의 파일들은 서버리스 함수로 자동 변환된다.
src/services
API 호풀과 관련된 코드 저장
src/hooks
커스텀 React 훅을 저장하는 폴더
src/pages/_app.js
커스텀 App 컴포넌트로 페이지를 초기화할 때 사용하며, 모든 페이지에 공통으로 적용할 레이아웃이나 상태를 정의할 수 있다.
src/pages/_document.js
커스텀 Document 컴포넌트로, 서버에서만 렌더링되며 HTML과 `<head>` 태그를 커스터마이징할 때 사용된다.
src/styles
전역 및 모듈 CSS 파일을 저장하는 폴더
src/styles/globals.css
모든 페이지에 적용되는 전역 스타일을 정의한다.
2. App Router
my-next-app/
├── app/
│ ├── layout.js
│ ├── page.js
│ ├── about/
│ │ ├── layout.js
│ │ └── page.js
│ ├── blog/
│ │ ├── [id]/
│ │ │ └── page.js
│ │ └── page.js
│ ├── styles/
│ │ └── globals.css
│ └── head.js
├── public/
│ ├── favicon.ico
│ └── images/
├── components/
│ └── MyComponent.js
├── .eslintrc.js
├── .gitignore
├── next.config.js
├── package.json
└── README.mdapp
새로운 파일 시스템 기반 라우팅을 위한 디렉터리이며, 페이지와 레이아웃을 정의하는 파일을 포함한다.
app/layout.js
앱의 레이아웃을 정의하는 파일이며, 여러 페이지에서 공통으로 사용되는 레이아웃을 설정할 수 있다.
app/page.js
루트 경로 ` / `에 해당하는 페이지 컴포넌트이다
app/about
`/about` 경로에 해당하는 페이지 및 레이아웃 파일을 포함하는 디렉터리
app/blog
`/blog` 경로에 해당하는 페이지 및 동적 라우팅을 포함하는 디렉터리
app/blog/[id]
동적 라우팅을 위해 사용되는 디렉터리이며 `[id]`는 블로그 포스트의 ID를 의미한다.
app/blog/[id]/page.js
동적 경로에 해당하는 페이지 컴포넌트
app/head.js
모든 페이지에 공통으로 적용될 `<head>` 요소를 설정할 수 있는 파일이다.
public
정적 파일을 저장하는 폴더이며, 이 폴더의 파일들은 루트 URL을 통해 접근 가능하다.
ex) `public/favicon.ico`는 `http://yourdomain.com/favicon.ico`로 접근할 수 있다.
components
재사용 가능한 React 컴포넌트를 저장하는 폴더이다.