Skip to content

NextJS:ProjectStructure

Top-level folders

  • app - 앱 라우터
  • pages - 페이지 라우터 - 13 이전에 사용하던 폴더 13부터 app 사용을 권장.
  • public - 제공할 정적 자산
  • src - 선택적 애플리케이션 소스 폴더

Top-level files

  • 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용 구성 파일
  • postcss.config.js - Tailwind CSS용 구성 파일

app Routing Conventions

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

Nested Routes

  • folder - Route segment
  • folder/folder - Nested route segment

Dynamic Routes

  • [folder] - Dynamic route segment
  • [...folder] - Catch-all route segment
  • [[...folder]] - Optional catch-all route segment

Route Groups and Private Folders

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

Parallel and Intercepted Routes

  • @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 - 생성된 Apple 앱 아이콘

그래프 및 Twitter 이미지 열기

  • 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 라우팅 규칙

특수 파일

  • _app - .js, .jsx, .tsx - 맞춤형 앱
  • _document - .js, .jsx, .tsx - 맞춤 문서
  • _error - .js, .jsx, .tsx - 사용자 지정 오류 페이지
  • 404 - .js, .jsx, .tsx - 404 오류 페이지
  • 500 - .js, .jsx, .tsx - 500 오류 페이지

Routes

폴더 규칙

  • index - .js, .jsx, .tsx - 홈페이지
  • folder/index - .js, .jsx, .tsx - 중첩된 페이지

파일 규칙

  • index - .js, .jsx, .tsx - 홈페이지
  • file - .js, .jsx, .tsx - 중첩된 페이지

Dynamic Routes

폴더 규칙

  • [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 - 선택적 포괄 경로 구간

See also