하나의 URL은 세그먼트 매칭, layout 중첩, page 렌더링, 상태 UI 적용 순서로 화면이 된다
문제가 생기면 이 순서대로 보면 어느 파일에서 화면이 달라졌는지 빠르게 좁힐 수 있다.
| 순서 | Next.js가 보는 것 | 결과 | 디버깅 포인트 |
|---|---|---|---|
| 1 | URL 경로 | 세그먼트 후보 선택 | 폴더 이름과 동적 라우트 확인 |
| 2 | 상위 layout.tsx | 공통 UI를 바깥부터 감쌈 | children 누락 여부 확인 |
| 3 | 최종 page.tsx | 고유 화면 렌더링 | page 파일 존재 여부 확인 |
| 4 | loading/error/not-found | 상태별 대체 UI | 해당 세그먼트에 파일이 있는지 확인 |
| 5 | client boundary | 브라우저 상호작용 영역 hydrate | use client 위치 확인 |