project map

프로젝트 구조는 수정할 파일과 생성물을 구분해 읽는다

App Router 실습에서는 src/app 안의 예약 파일을 중심으로 작업하고, 빌드 산출물과 설치된 패키지는 직접 고치지 않습니다.

src/app

라우트, 레이아웃, 페이지 UI를 작성하는 핵심 작업 영역입니다.

public

이미지와 정적 파일을 넣고 루트 경로로 직접 제공하는 곳입니다.

package.json

의존성, 프로젝트 명령, 메타데이터를 확인하는 기준 파일입니다.

node_modules

설치 결과물이므로 코드를 직접 수정하지 않고 다시 설치로 관리합니다.

.next

개발 서버와 빌드가 만드는 캐시라서 문제 해결 때 삭제 후 재생성합니다.

layout.tsx

공유 껍데기와 children 자리

루트 레이아웃은 html, body, 전역 스타일을 책임지고 하위 라우트를 감쌉니다.

page.tsx

접근 가능한 화면의 끝점

폴더가 URL 후보를 만들고, 그 안의 page 파일이 실제 브라우저 화면을 공개합니다.

globals.css

전역 스타일의 시작점

모든 페이지에 공통으로 적용할 기본 스타일을 루트 레이아웃에서 한 번 가져옵니다.

config

프로젝트 동작 변경

next.config.js와 tsconfig.json은 기능 옵션과 타입 해석 규칙을 조정합니다.

화면을 바꿀 때

src/app의 page, layout, 컴포넌트 파일을 찾습니다.

정적 파일을 넣을 때

public에 배치하고 URL 경로로 직접 참조합니다.

명령을 확인할 때

package.json의 scripts 항목을 기준으로 실행합니다.

생성물이 꼬일 때

.next나 설치 결과를 재생성해 원인을 분리합니다.