Next.js 프로젝트 구조(App Router ver.) Project Structure | Next.js

 

App Router를 사용하는 Next.js 프로젝트의 구조를 알아봅니다.

 

---

최상위 폴더 Top-level folders

최상위 폴더는 애플리케이션 코드와 정적 리소스들을 구성하는데 사용됩니다.

┌ app
├ public
or
┌ src
│  ├ app
├ public

• app : App Router
• public : 정적 리소스
• src : 소스 분리 위한 폴더(선택)

 

최상위 파일 Top-level files

최상위 파일들은

• 애플리케이션 설정
• 의존성 관리
• 미들웨어 실행
• 모니터링 툴 통합
• 환경변수 설정

등에 사용됩니다.

• next.config.js
  Next.js 설정 파일
• instrumentation.ts
• 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 정의파일

 

Getting Started: Project Structure | Next.js