프로젝트 구조
이 페이지는 Next.js 애플리케이션의 프로젝트 구조에 대한 개요를 제공합니다. 최상위 파일과 폴더, 구성 파일, 그리고 app과 pages 디렉토리 내의 라우팅 규칙을 다룹니다.
각 규칙에 대해 자세히 알아보려면 파일 및 폴더 이름을 클릭하세요.
최상위 폴더
최상위 폴더는 애플리케이션의 코드와 정적 자산을 구성하는 데 사용됩니다.
app | App 라우터 |
pages | Pages 라우터 |
public | 제공될 정적 자산 |
src | 선택적 애플리케이션 소스 폴더 |
최상위 파일
최상위 파일은 애플리케이션 구성, 종속성 관리, 미들웨어 실행, 모니터링 도구 통합 및 환경 변수 정의에 사용됩니다.
| 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 구성 파일 |
app 라우팅 규칙
다음 파일 규칙은 app 라우터에서 라우트를 정의하고 메타데이터를 처리하는 데 사용됩니다.
라우팅 파일
layout | .js .jsx .tsx | 레이아웃 |
page | .js .jsx .tsx | 페이지 |
loading | .js .jsx .tsx | 로딩 UI |
not-found | .js .jsx .tsx | 찾을 수 없음 UI |
error | .js .jsx .tsx | 오류 UI |
global-error | .js .jsx .tsx | 전역 오류 UI |
route | .js .ts | API 엔드포인트 |
template | .js .jsx .tsx | 다시 렌더링되는 레이아웃 |
default | .js .jsx .tsx | 병렬 라우트 폴백 페이지 |
중첩된 라우트
folder | 라우트 세그먼트 |
folder/folder | 중첩된 라우트 세그먼트 |
동적 라우트
[folder] | 동적 라우트 세그먼트 |
[...folder] | 모든 것을 포착하는 라우트 세그먼트 |
[[...folder]] | 선택적 모든 것을 포착하는 라우트 세그먼트 |
라우트 그룹 및 비공개 폴더
(folder) | 라우팅에 영향을 주지 않고 라우트 그룹화 |
_folder | 폴더와 모든 하위 세그먼트를 라우팅에서 제외 |
병렬 및 인터셉트된 라우트
@folder | 명명된 슬롯 |
(.)folder | 같은 레벨 인터셉트 |
(..)folder | 한 레벨 위 인터셉트 |
(..)(..)folder | 두 레벨 위 인터셉트 |
(...)folder | 루트에서 인터셉트 |
메타데이터 파일 규칙
앱 아이콘
favicon | .ico | 파비콘 파일 |
icon | .ico .jpg .jpeg .png .svg | 앱 아이콘 파일 |
icon | .js .ts .tsx | 생성된 앱 아이콘 |
apple-icon | .jpg .jpeg, .png | Apple 앱 아이콘 파일 |
apple-icon | .js .ts .tsx | 생성된 Apple 앱 아이콘 |
오픈 그래프 및 트위터 이미지
opengraph-image | .jpg .jpeg .png .gif | 오픈 그래프 이미지 파일 |
opengraph-image | .js .ts .tsx | 생성된 오픈 그래프 이미지 |
twitter-image | .jpg .jpeg .png .gif | 트위터 이미지 파일 |
twitter-image | .js .ts .tsx | 생성된 트위터 이미지 |
SEO
sitemap | .xml | 사이트맵 파일 |
sitemap | .js .ts | 생성된 사이트맵 |
robots | .txt | 로봇 파일 |
robots | .js .ts | 생성된 로봇 파일 |
pages 라우팅 규칙
다음 파일 규칙은 pages 라우터에서 라우트를 정의하는 데 사용됩니다.
특수 파일
_app | .js .jsx .tsx | 커스텀 App |
_document | .js .jsx .tsx | 커스텀 Document |
_error | .js .jsx .tsx | 커스텀 오류 페이지 |
404 | .js .jsx .tsx | 404 오류 페이지 |
500 | .js .jsx .tsx | 500 오류 페이지 |
라우트
| 폴더 규칙 | ||
index | .js .jsx .tsx | 홈 페이지 |
folder/index | .js .jsx .tsx | 중첩된 페이지 |
| 파일 규칙 | ||
index | .js .jsx .tsx | 홈 페이지 |
file | .js .jsx .tsx | 중첩된 페이지 |
동적 라우트
| 폴더 규칙 | ||
[folder]/index | .js .jsx .tsx | 동적 라우트 세그먼트 |
[...folder]/index | .js .jsx .tsx | 모든 것을 포착하는 라우트 세그먼트 |
[[...folder]]/index | .js .jsx .tsx | 선택적 모든 것을 포착하는 라우트 세그먼트 |
| 파일 규칙 | ||
[file] | .js .jsx .tsx | 동적 라우트 세그먼트 |
[...file] | .js .jsx .tsx | 모든 것을 포착하는 라우트 세그먼트 |
[[...file]] | .js .jsx .tsx | 선택적 모든 것을 포착하는 라우트 세그먼트 |