Routing

Routing · Konseptit

Lyhyesti

Mekanismi joka määrittää miten URL-osoitteet vastaavat sovelluksen eri sivuja ja näkymiä.

Routing eli reititys määrittää miten URL-osoitteet yhdistyvät sovelluksen sivuihin ja näkymiin. Next.js App Router käyttää tiedostopohjaista reititystä: kansiorakenne src/app/-hakemistossa vastaa suoraan URL-polkuja, joten erillistä reititystiedostoa ei tarvita. Dynaamiset reitit käyttävät hakasulkeita: [slug] vastaa mitä tahansa arvoa URL:ssa, mikä mahdollistaa esimerkiksi blogiartikkeleiden tai tuotesivujen generoinnin samalla komponentilla. App Router tukee myös ryhmiä (route groups) sulkeilla (marketing)/, layoutteja jotka jakavat UI:n usean sivun kesken, ja loading.tsx-tiedostoja jotka näyttävät latausanimaation automaattisesti. Vibekoodaajalle reititys on tärkeä ymmärtää, koska tekoäly luo uusia sivuja luomalla tiedostoja oikeisiin kansioihin.

Esimerkkejä

app/about/page.tsx → /about — staattinen sivu

app/blog/[slug]/page.tsx → /blog/mikä-tahansa-artikkeli — dynaaminen reitti

app/(marketing)/layout.tsx — route group jakaa layoutin ilman URL-vaikutusta

Link-komponentti: <Link href="/blog">Blogi</Link> navigoi ilman sivulatausta

app/api/users/route.ts → /api/users — API-reitti palvelinlogiikalle