Kuinka tiedostopohjaiset reitit toimivat App Routerissa?

Question

Accepted Answer

App Routerissa **`app/`-kansion rakenne määrittää reitityksesi** — sinun ei tarvitse kirjoittaa reititin konfiguraatiota. Jokainen kansio on URL-segmentti, ja siinä olevat erikoistiedostot määrittävät, mitä kyseinen segmentti renderöi. ## Kansiot = URL-segmentit ```text app/ page.tsx → / about/page.tsx → /about blog/page.tsx → /blog blog/[slug]/page.tsx → /blog/:slug (dynamic segment) shop/(sale)/page.tsx → /shop (route group — parentheses don't add to URL) ``` ## Erikoistiedostot Jokainen kansio voi sisältää varatut tiedostojen nimet, joilla kullakin on erityinen rooli: ```text page.tsx → the route's UI (REQUIRED to make a segment routable) layout.tsx → shared wrapper that persists across child routes loading.tsx → loading UI (auto-wraps the page in ) error.tsx → error boundary for the segment not-found.tsx→ 404 UI route.ts → an API endpoint (instead of a page) ``` ## Dynaamiset segmentit ```tsx // app/blog/[slug]/page.tsx → matches /blog/hello, /blog/anything export default function Post({ params }: { params: { slug: string } }) { return

Post: {params.slug}

; // params.slug = "hello" } ``` Hakasulkeet luovat dynaamisen parametrin, joka välitetään sivulle `params`-kautta. Variaatiot: `[...slug]` (catch-all), `[[...slug]]` (valinnainen catch-all). ## Route-ryhmät ja organisointi ```text app/(marketing)/about/page.tsx → /about (the (marketing) folder is ignored in the URL) ``` Sulkeet luovat **route-ryhmiä** tiedostojen järjestämiseen tai eri layouttien käyttöön muuttamatta URL-osoitetta. ## Miksi se on tärkeää Tiedostopohjainen reititys tekee URL-rakenteesta ilmeisen tiedostopuusta — ei ole keskitettyä reitityksen konfiguraatiota, jota pitäisi ylläpitää ja pitää synkronoituna. Erikoistiedostojen (`page`, `layout`, `loading`, `error`, `route`) ja hakasulkekonventioiden (`[param]`, `[...catchAll]`, `(group)`) tunteminen on App Router -sovelluksen kehittämisen perussanasto.