Next.js 프로젝트 구조
이 페이지는 Next.js 애플리케이션의 프로젝트 구조에 대한 개요를 제공합니다. 최상위 파일 및 폴더, 구성 파일, 그리고 app 및 pages 디렉토리 내의 라우팅 관례를 다룹니다.
파일 및 폴더 이름을 클릭하면 각 관례에 대해 더 자세히 알아볼 수 있습니다.
최상위 폴더
최상위 폴더는 애플리케이션의 코드와 정적 자산을 구성하는 데 사용됩니다.
app | App Router |
pages | Pages Router |
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-icon | .js .ts .tsx | 생성된 애플 앱 아이콘 |
오픈 그래프 및 트위터 이미지
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 | 커스텀 앱 |
_document | .js .jsx .tsx | 커스텀 문서 |
_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 | 선택적 모든 것을 포함하는 라우트 |