시작하기: 프로젝트 구조 | Next.js

출처 URL: https://nextjs.org/docs/pages/getting-started/project-structure

페이지 라우터 시작하기프로젝트 구조

프로젝트 구조와 구성

2026년 2월 20일 업데이트

이 페이지는 Next.js의 모든 폴더 및 파일 규칙과 프로젝트 구성에 대한 권장 사항을 개괄합니다.

폴더 및 파일 규칙

최상위 폴더

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

| ---|--- app| 앱 라우터 pages| 페이지 라우터 public| 서비스할 정적 자산 src| 선택적 애플리케이션 소스 폴더

최상위 파일

최상위 파일은 애플리케이션 구성, 의존성 관리, 프록시 실행, 모니터링 도구 통합, 환경 변수 정의에 사용됩니다.

| ---|--- Next.js| next.config.js| Next.js 구성 파일 package.json| 프로젝트 의존성과 스크립트 instrumentation.ts| OpenTelemetry 및 계측 파일 proxy.ts| Next.js 요청 프록시 .env| 환경 변수(버전 관리에 추적하면 안 됨) .env.local| 로컬 환경 변수(버전 관리에 추적하면 안 됨) .env.production| 프로덕션 환경 변수(버전 관리에 추적하면 안 됨) .env.development| 개발 환경 변수(버전 관리에 추적하면 안 됨) eslint.config.mjs| ESLint 구성 파일 .gitignore| 무시할 Git 파일 및 폴더 next-env.d.ts| Next.js용 TypeScript 선언 파일(버전 관리에 추적하면 안 됨) tsconfig.json| TypeScript 구성 파일 jsconfig.json| JavaScript 구성 파일

파일 규칙

| | ---|---|--- _app| .js .jsx .tsx| 사용자 지정 App _document| .js .jsx .tsx| 사용자 지정 Document _error| .js .jsx .tsx| 사용자 지정 오류 페이지 404| .js .jsx .tsx| 404 오류 페이지 500| .js .jsx .tsx| 500 오류 페이지

라우트

| | ---|---|--- 폴더 규칙| | index| .js .jsx .tsx| 홈 페이지 folder/index| .js .jsx .tsx| 중첩 페이지 파일 규칙| | index| .js .jsx .tsx| 홈 페이지 file| .js .jsx .tsx| 중첩 페이지

동적 라우트

| | ---|---|--- 폴더 규칙| | [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| 선택적 캐치올 라우트 세그먼트