[NextJS 13] Getting Started - app Routing Project Structure(앱 라우팅 프로젝트 구조)

이 페이지는 Next.js 프로젝트의 파일과 폴더 구조 개요를 제공합니다. 최상위 파일 및 폴더, 구성 파일, 그리고 app 디렉토리 내에서의 라우팅 규칙을 다룹니다.

최상위 파일

Next.js
next.config.js	Next.js용 구성 파일
middleware.ts	Next.js 요청 미들웨어
.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 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

중첩 경로

folder	Route segment
folder/folder	Nested route segment

동적 경로

[folder]	동적 경로 세그먼트
[...folder]	포괄적 세그먼트
[[...folder]]	선택적 포괄적인 세그먼트

경로 그룹 및 개인 폴더

(folder)	라우팅에 영향을 주지 않고 경로 그룹화
_folder	라우팅에서 폴더 및 모든 하위 세그먼트 선택

병렬 및 가로채기 경로

@folder	명명된 슬롯
(.)folder	같은 수준 가로채기
(..)folder	한 단계 위의 가로채기
(..)(..)folder	위의 두 수준 차단
(...)folder	루트에서 가로채기

메타데이터 파일 규칙

App Icons

favicon	.ico	Favicon file
icon	.png .svg	App Icon file
icon	.ico .jpg .jpeg .png .svg	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

 

참조

- https://nextjs.org/docs/getting-started/project-structure