Next.js 프로젝트는 소스 코드, 정적 자산, 설정 파일, 설치 패키지, 빌드 결과물로 나눠 읽는다
처음에는 파일 이름을 모두 외우기보다 어느 영역을 직접 수정하고 어느 영역을 Next.js가 관리하는지 구분하는 것이 중요하다.
| 영역 | 대표 위치 | 역할 | 처음 할 일 |
|---|---|---|---|
| 소스 코드 | src/app | 페이지, 레이아웃, 라우트 UI 작성 | page.tsx와 layout.tsx 위치 확인 |
| 정적 자산 | public | 이미지, 폰트, favicon 제공 | 루트 URL로 직접 접근됨을 기억 |
| 설정 파일 | package.json, tsconfig.json, next.config.js | 명령, 타입, 프레임워크 동작 제어 | scripts와 paths만 먼저 읽기 |
| 설치 패키지 | node_modules | 프로젝트 의존성 저장 | 직접 편집하지 않고 재설치로 복구 |
| 빌드 결과 | .next | 개발/빌드 cache와 산출물 | 문제 시 삭제 후 재생성 가능 |