File-Based Routing 기본

Folder 가 곧 route

app/ 안에서 폴더가 page.tsx 들고 있으면 route segment 가 돼. Folder nesting = route nesting:

File	URL
`app/page.tsx`	`/`
`app/about/page.tsx`	`/about`
`app/blog/page.tsx`	`/blog`
`app/blog/[slug]/page.tsx`	`/blog/:slug`
`app/dashboard/settings/page.tsx`	`/dashboard/settings`

"page 가 public 으로 만든다" 룰

page.tsx 만 route 를 외부에 노출시켜. 같은 folder 의 다른 file 은 organizational — framework 가 load 는 하지만 URL 로 서빙 안 함. 그래서 URL 망가뜨리지 않고 component 를 route 옆에 놔둘 수 있어.

특수 file 어휘

File	역할
`page.tsx`	Route UI — segment 를 public 으로 만드는 데 필수.
`layout.tsx`	공유 UI wrap. Child navigation 너머로 살아남음.
`loading.tsx`	Segment 의 Suspense fallback.
`error.tsx`	Error boundary (Client Component 여야 함).
`not-found.tsx`	안에서 `notFound()` 부르면 render.
`template.tsx`	Layout 같지만 navigation 마다 re-mount.
`default.tsx`	Hard navigation 시 parallel route slot 의 fallback.
`route.ts`	API endpoint. 같은 folder 의 `page.tsx` 와 공존 불가.

Code

최소 page·tsx

// app/about/page.tsx → /about
export default function AboutPage() {
  return (
    <main className="prose mx-auto p-8">
      <h1>About</h1>
      <p>Default 로 server-rendered.</p>
    </main>
  );
}

Colocated component 는 route 안 됨·text

app/blog/
├── page.tsx               → /blog (public)
├── PostCard.tsx           → route 아님, 그냥 sibling
├── useFilters.ts          → route 아님
└── [slug]/
    ├── page.tsx           → /blog/:slug (public)
    └── ShareButton.tsx    → route 아님

Folder 가 곧 route

"page 가 public 으로 만든다" 룰

특수 file 어휘

Code

External links

Exercise

Progress

댓글 0