[Next.js] Getting Started - Project Structure

Next.js 로고

Next.js 문서 읽기

Project Structure

Next.js 프로젝트의 폴더 구조 개요를 설명합니다.

app과 pages 디렉토리에서 top-level의 파일, 폴더, 설정 파일, 라우팅 컨벤션을 설명한다.

 

Top-level folders

• app : App Router
• pages : Pages Router
• public : 정적 자원
• src : 애플리케이션 소스 폴더(option)

 

Top-level files

• next.config.js : Next.js 설정 파일
• package.json : 프로젝트 의존성과 스크립트
• instrumentation.ts : 원격 분석 및 계측을 위한 파일
• middleware.ts : 요청 미들웨어
• .env : 환경 변수
• .env.local : 로컬 환경 변수
• .env.production : 프로덕션 모드 환경 변수
• .env.development : 개발모드 환경 변수
• .eslintrc.json : ESLint 설정 파일
• .gitignore : git 관리 제외 파일, 폴더
• next-env.d.ts : 타입스크립트 선언 파일
• tsconfig.json : 타입스크립트 설정 파일
• jsconfig.json : 자바스크립트 설정 파일

 

app Routing Conventions

Routing Files

• 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 endpoint
• template(.js, .jsx, .tsx) : re-rendered 사용되는 레이아웃
• default(.js, .jsx, .tsx) : 병렬 라우팅 fallback 페이지

 

Nested Routes

• folder : 라우팅 분기
• folder/folder : 중첩 라우팅 분기

Dynamic Routes

• [folder] : 동적 라우팅 분기
• [...folder] : catch-all 라우팅 분기(단일 혹은 중첩된 모든 경로 파라미터로 전달)
• [[...folder]] : optional catch-all 라우팅 분기(단일 혹은 중첩 + 빈 경우 포함)

 

Route Groups and Private Folders

• (folder) : 라우팅으로 구분되지 않고 그룹 설정
• _folder : 라우팅에서 제외되는 폴더

 

Parallel and Intercepted Routes

• @folder : 독립된 slot으로 라우팅
• (.)folder : 동일 레벨로 라우팅 이동
• (..)folder : 한단계 위로 라우팅
• (..)(..)folder: 두단계 위로 라우팅
• (...)folder : root 단계로 라우팅

 

Metadata File Conventions

App Icons

• favicon(.ico) : favicon 파일
• icon(.ico .jpg .jpeg .png .svg) : 앱 아이콘 파일
• icon(.js .ts .tsx) : 생성되는 앱 아이콘 파일
• apple-icon(.jpg .jpeg, .png) : Apple app 아이콘 파일
• apple-icon(.js .ts .tsx) : 생성되는 Apple app 아이콘 파일

 

Open Graph and Twitter Images

• opengraph-image(.jpg .jpeg .png .gif) : Open Graph image file
• opengraph-image(.js .ts .tsx) : 생성되는 Open Graph image
• twitter-image(.jpg .jpeg .png .gif) : Twitter image file
• twitter-image(.js .ts .tsx) : 생성되는 Twitter image

 

SEO

• sitemap(.xml) : Sitemap file
• sitemap(.js .ts) : 생성되는 Sitemap file
• robots(.txt) : Robots file
• robots(.js .ts) : 생성되는 Robots file

 

pages Routing Conventions

Special Files

• _app(.js .jsx .tsx) : Custom App
• _document(.js .jsx .tsx) : Custom Document
• _error(.js .jsx .tsx) : Custom Error Page
• 404(.js .jsx .tsx) : 404 Error Page
• 500(.js .jsx .tsx) : 500 Error Page

 

Routes

Folder convention

• index(.js .jsx .tsx) : Home page
• folder/index(.js .jsx .tsx) : Nested page

File convention

• index(.js .jsx .tsx) : Home page
• file(.js .jsx .tsx) : Nested page

 

Dynamic Routes

Folder convention

• [folder]/index(.js .jsx .tsx) : Dynamic route segment
• [...folder]/index(.js .jsx .tsx) : Catch-all route segment
• [[...folder]]/index(.js .jsx .tsx) : Optional catch-all route segment

File convention

• [file](.js .jsx .tsx) : Dynamic route segment
• [...file](.js .jsx .tsx) : Catch-all route segment
• [[...file]](.js .jsx .tsx) : Optional catch-all route segment

 

Next.js Docs Getting Started Project Structure

 

 

Getting Started: Project Structure | Next.js