APP ROUTER STRUCTURE

Next.js 프로젝트 구조는 app 폴더의 파일 이름이 라우팅 규칙이 되는 방식이다

처음에는 파일이 많아 보여도 역할은 분명하다. `src/app`은 화면과 라우팅, `public`은 정적 파일, 설정 파일은 빌드와 타입 규칙을 담당한다.

기본 파일 나무

src/ 소스 코드 루트

src/app/ App Router 중심

src/app/page.tsx / 페이지

src/app/layout.tsx 공통 레이아웃

public/ 정적 파일

package.json 스크립트와 의존성

page.tsx

해당 경로에서 실제로 보이는 UI를 정의한다.

layout.tsx

여러 페이지가 공유하는 틀과 HTML 구조를 잡는다.

loading/error

로딩과 오류 상태를 라우트 단위로 분리한다.

[id]

폴더 이름에 대괄호를 쓰면 동적 경로가 된다.

라우팅 기준폴더가 경로 세그먼트이고, `page.tsx`가 있어야 페이지가 된다.

정적 파일 기준`public/logo.png`는 `/logo.png`처럼 루트 경로에서 접근한다.

생성물 기준`.next`는 빌드 캐시와 결과물이므로 직접 수정하지 않는다.