Next.js 프로젝트 구조
이 페이지에서는 Next.js 프로젝트의 파일 및 폴더 구조에 대한 개요를 제공합니다. 앱 및 페이지 디렉토리 내의 최상위 파일 및 폴더, 구성 파일 및 라우팅 규칙을 다룹니다.
최상위 파일
next.js 관련
| 파일명 | 설명 |
|---|
next.config.js | Next.js 설정 파일 |
middleware.ts(.js) | 미들웨어 정의 |
instrumentation.ts | OpenTelemetry and Instrumentation |
.env | 환경변수 파일 |
.env.local | 로컬 환경변수 파일 |
.env.production | 프로덕션 환경변수 파일 |
.env.development | 개발 환경변수 파일 |
.next-env.d.ts | Next.js용 TypeScript 선언 파일 |
Ecosystem
| 파일명 | 설명 |
|---|
package.json | 프로젝트 의존성 및 스크립트 선언 파일 |
.gitignore | Git에서 무시할 파일 및 폴더 |
tsconfig.json | TypeScript용 구성 파일 |
jsconfig.json | JavaScript용 구성 파일 |
.eslintrc.json | ESLint용 구성 파일 |
최상위 폴더
| 폴더 명 | 설명 |
|---|
app | 앱 라우터 |
pages | 페이지 라우터 |
public | 사용할 정적 에셋(글꼴, 이미지 등) |
src | 추가적인 애플리케이션 소스 폴더 |
App Routing 컨벤션
Routing 파일
| 파일명 | 확장자 | 설명 |
|---|
layout | .js .jsx .tsx | 레이아웃 |
page | .js .jsx .tsx | 페이지 |
loading | .js .jsx .tsx | 로딩 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 엔드포인트 |
template | .js .jsx .tsx | Re-rendered layout |
default | .js .jsx .tsx | 병렬 라우팅 대체 페이지 |
중첩 라우트
| 파일명 | 설명 |
|---|
folder | 라우트 segment |
folder/folder | 중첩된 라우트 segment |
동적 라우트
| 파일명 | 설명 |
|---|
[folder] | 동적 라우트 segment |
[...folder] | Catch-all segments |
[[...folder]] | Optional catch-all segments |
Route Groups and Private Folders
| 파일명 | 설명 |
|---|
(folder) | Group routes without affecting routing |
_folder | Opt folder and all child segments out of routing |
Parallel and Intercepted Routes
| 파일명 | 설명 |
|---|
@folder | Named slot |
(.)folder | Intercept same level |
(..)folder | Intercept one level above |
(..)(..)folder | Intercept two levels above |
(...)folder | Intercept from root |
App Icons
| 파일명 | 확장자 | 설명 |
|---|
favicon | .ico | Favicon file |
icon | .ico .jpg .jpeg .png .svg | App Icon file |
icon | .js .ts .tsx | Generated App Icon |
apple-icon | .jpg .jpeg, .png | Apple App Icon file |
apple-icon | .js .ts .tsx | Generated Apple App Icon |
Open Graph and Twitter Images
| 파일명 | 확장자 | 설명 |
|---|
opengraph-image | .jpg .jpeg .png .gif | Open Graph image file |
opengraph-image | .js .ts .tsx | Generated Open Graph image |
twitter-image | .jpg .jpeg .png .gif | Twitter image file |
twitter-image | .js .ts .tsx | Generated Twitter image |
SEO
| 파일명 | 확장자 | 설명 |
|---|
sitemap | .xml | Sitemap file |
sitemap | .js .ts | Generated Sitemap |
robots | .txt | Robots file |
robots | .js .ts | Generated Robots file |
Page Routing 컨벤션
(생략)
원문 - https://nextjs.org/docs/getting-started/project-structure
