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