Next.js 프로젝트 구조
이 페이지는 Next.js 프로젝트의 파일 및 폴더 구조에 대한 개요를 제공한다. 최상위 파일 및 폴더, 구성 파일, 앱 및 페이지 디렉토리 내 라우팅 규칙 등을 다룬다.
1. 최상위(top-level) 폴더
| Next.js | |
|---|---|
app | 앱 라우터 |
pages | 페이지 라우터 |
public | 제공할 정적 자산(assets) |
src | 앱 소스 폴더(선택 사항) |
2. 최상위 파일
| Next.js | |
|---|---|
next.config.js | Next.js 구성 파일 |
package.json | 프로젝트 종속성 및 스크립트 |
instrumentation.ts | OpenTelemetry 및 계측 파일 |
middleware.ts | Next.js 요청 미들웨어 |
.env | 환경 변수 |
.env.local | 로컬 환경 변수 |
.env.production | 프로덕션 환경 변수 |
.env.development | 개발 환경 변수 |
.eslintrc.json | ESLint용 구성 파일 |
.gitignore | 무시할 Git 파일 및 폴더 |
next-env.d.ts | Next.js 용 TypeScript 선언 파일 |
tsconfig.json | TypeScript용 구성 파일 |
jsconfig.json | JavaScript용 구성 파일 |
3. app 라우팅 규칙
3.1 라우팅 파일
| 이름 | 역할 | |
|---|---|---|
layout | .js .jsx .tsx | 레이아웃 |
page | .js .jsx .tsx | 페이지 |
loading | .js .jsx .tsx | 로딩 중 UI |
not-found | .js .jsx .tsx | 404 오류 UI |
error | .js .jsx .tsx | 오류 UI |
global-error | .js .jsx .tsx | 전역 오류 UI |
route | .js .ts | 서버사이드 API 엔드포인트 |
template | .js .jsx .tsx | 다시 렌더링 될 때의 UI |
default | .js .jsx .tsx | 병렬 라우팅 시의 대체 UI |
3.2 중첩 라우팅
| 이름 | 역할 |
|---|---|
folder | 라우팅 세그먼트 |
folder/folder | 중첩 라우팅 세그먼트 |
3.3 동적 라우팅
| 이름 | 역할 |
|---|---|
[folder] | 동적 경로 세그먼트 |
[...folder] | 캐치-올 경로 세그먼트 |
[[...folder]] | 선택적 catch-all 경로 세그먼트 |
3.4 라우팅 그룹 및 라우팅 제외
| 이름 | 역할 |
|---|---|
(folder) | 라우팅을 변조하지 않는 라우트 그룹 |
_folder | 라우팅에서 제외할 디렉토리 및 하위 세그먼트 |
3.5 병렬 라우팅과 인터셉트
| 이름 | 역할 |
|---|---|
@folder | 병렬 라우팅 슬롯 이름 |
(.)folder | 현재 경로 라우팅 인터셉트 |
(..)folder | 1단계 상위 경로 라우팅 인터셉트 |
(..)(..)folder | 2단계 상위 경로 라우팅 인터셉트 |
(...)folder | 최상위 경로 라우팅 인터셉트 |
3.6 메타데이터 파일 규칙
3.6.1 앱 아이콘
| 이름 | 역할 | |
|---|---|---|
favicon | .ico | Favicon 파일 |
icon | .ico .jpg .jpeg .png .svg | 앱 아이콘 파일 |
icon | .js .ts .tsx | 코드로 구성한 앱 아이콘 |
apple-icon | .jpg .jpeg, .png | Apple 앱 아이콘 파일 |
apple-icon | .js .ts .tsx | 코드로 구성한 Apple 앱 아이콘 |
3.6.2 오픈 그래프 및 Twitter 이미지
| 이름 | 역할 | |
|---|---|---|
opengraph-image | .jpg .jpeg .png .gif | Open Graph 이미지 파일 |
opengraph-image | .js .ts .tsx | 코드로 구성한 Open Graph 이미지 |
twitter-image | .jpg .jpeg .png .gif | Twitter 이미지 파일 |
twitter-image | .js .ts .tsx | 코드로 구성한 Twitter 이미지 |
3.6.3 SEO
| 이름 | 역할 | |
|---|---|---|
sitemap | .xml | 사이트맵 파일 |
sitemap | .js .ts | 코드로 구성한 사이트맵 항목 |
robots | .txt | Robots 파일 |
robots | .js .ts | 코드로 구성한 Robots 항목 |
4. pages 라우팅 규칙
4.1 특수 파일
| 이름 | 역할 | |
|---|---|---|
_app | .js .jsx .tsx | 커스텀 앱 |
_document | .js .jsx .tsx | 커스텀 문서 |
_error | .js .jsx .tsx | 커스텀 오류 페이지 |
404 | .js .jsx .tsx | 커스텀 404 오류 페이지 |
500 | .js .jsx .tsx | 커스텀 500 오류 페이지 |
4.2 경로
| 이름 | 역할 | |
|---|---|---|
| 폴더 규칙 | ||
index | .js .jsx .tsx | 홈페이지 |
folder/index | .js .jsx .tsx | 중첩 페이지 |
| 파일 규칙 | ||
index | .js .jsx .tsx | 홈페이지 |
file | .js .jsx .tsx | 중첩 페이지 |
4.3 다이나믹 라우트
| 이름 | 역할 | |
|---|---|---|
| 폴더 규칙 | ||
[folder]/index | .js .jsx .tsx | 동적 라우트 세그먼트 |
[...folder]/index | .js .jsx .tsx | Catch-all 라우팅 세그먼트 |
[[...folder]]/index cf. | .js .jsx .tsx | 선택적 Catch-all 라우팅 세그먼트 |
| 파일 규칙 | ||
[file] | .js .jsx .tsx | 동적 라우트 세그먼트 |
[...file] | .js .jsx .tsx | Catch-all 라우팅 세그먼트 |
[[...file]] cf. | .js .jsx .tsx | 선택적 Catch-all 라우팅 세그먼트 |