NextJS:ProjectStructure
Top-level folders
- app - 앱 라우터
- pages - 페이지 라우터 - 13 이전에 사용하던 폴더 13부터 app 사용을 권장.
- public - 제공할 정적 자산
- src - 선택적 애플리케이션 소스 폴더
Top-level files
- 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용 구성 파일
- postcss.config.js - Tailwind CSS용 구성 파일
app Routing Conventions
Routing Files
-
layout - .js, .jsx, .tsx - Layout -
page - .js, .jsx, .tsx - Page -
loading - .js, .jsx, .tsx - Loading UI -
not-found - .js, .jsx, .tsx - Not Found UI -
error - .js, .jsx, .tsx - Error UI -
global-error - .js, .jsx, .tsx - Global error UI -
route - .js, .ts - API endpoint -
template - .js, .jsx, .tsx - Re-rendered layout -
default - .js, .jsx, .tsx - Parallel route fallback page
Nested Routes
-
folder - Route segment -
folder/folder - Nested route segment
Dynamic Routes
-
[folder] - Dynamic route segment -
[...folder] - Catch-all route segment -
[[...folder]] - Optional catch-all route segment
Route Groups and Private Folders
-
(folder) - 라우팅에 영향을 주지 않고 경로 그룹화 -
_folder - 라우팅에서 폴더 및 모든 하위 세그먼트 선택
Parallel and Intercepted Routes
-
@folder - 명명된 슬롯 -
(.)folder - 같은 수준 가로채기 -
(..)folder - 한 단계 위의 가로채기 -
(..)(..)folder - 위의 두 수준 차단 -
(...)folder - 루트에서 가로채기
메타데이터 파일 규칙
앱 아이콘
-
favicon - .ico - 파비콘 파일 -
icon - .ico, .jpg, .jpeg, .png, .svg - 앱 아이콘 파일 -
icon - .js, .ts, .tsx - 생성된 앱 아이콘 -
apple-icon - .jpg, .jpeg,.png - 애플 앱 아이콘 파일 -
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 - 생성된 트위터 이미지
-
sitemap - .xml - 사이트맵 파일 -
sitemap - .js, .ts - 생성된 사이트맵 -
robots - .txt - 로봇 파일 -
robots - .js, .ts - 생성된 로봇 파일
pages 라우팅 규칙
특수 파일
-
_app - .js, .jsx, .tsx - 맞춤형 앱 -
_document - .js, .jsx, .tsx - 맞춤 문서 -
_error - .js, .jsx, .tsx - 사용자 지정 오류 페이지 -
404 - .js, .jsx, .tsx - 404 오류 페이지 -
500 - .js, .jsx, .tsx - 500 오류 페이지
Routes
폴더 규칙
-
index - .js, .jsx, .tsx - 홈페이지 -
folder/index - .js, .jsx, .tsx - 중첩된 페이지
파일 규칙
-
index - .js, .jsx, .tsx - 홈페이지 -
file - .js, .jsx, .tsx - 중첩된 페이지
Dynamic Routes
폴더 규칙
-
[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 - 선택적 포괄 경로 구간
See also