Next.js 프로젝트 구조
- Published on
- Next.js 프로젝트에서의 폴더 및 파일 규칙 리스트
Table of Contents
이 페이지는 Next.js 프로젝트의 파일 및 폴더 구조에 대한 개요를 제공합니다. 최상위 파일 및 폴더, 설정 파일, app 및 pages 디렉토리 내의 라우팅 규칙을 다룹니다.
최상위 폴더
app | 앱 라우터 |
pages | 페이지 라우터 |
public | 제공될 정적 자산 |
src | 선택적 애플리케이션 소스 폴더 |
최상위 파일
| Next.js | |
next.config.js | Next.js 설정 파일 |
package.json | 프로젝트 의존성 및 스크립트 |
instrumentation.ts | OpenTelemetry 및 Instrumentation 파일 |
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/ 폴더 내 규칙
라우팅 파일
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 | Favicon 파일 |
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 | 생성된 로봇 파일 |