06 — File-based routing

Výuka

Co je "routing"?

Routing (směrování) je systém, který rozhoduje, co se stane, když uživatel navštíví určitou adresu (URL) ve tvé aplikaci.

Představ si to jako recepci v budově: když přijdeš a řekneš "chci na oddělení prodeje", recepční tě nasměruje na správné patro a dveře. Routing dělá to samé pro webové stránky:

• Uživatel napíše /blog → zobrazí se stránka s blogem
• Uživatel napíše /kontakt → zobrazí se kontaktní formulář
• Uživatel napíše /produkty/123 → zobrazí se detail produktu s ID 123

Proč to existuje?

V klasických webových aplikacích (např. v Reactu bez frameworku) musíš ručně psát konfiguraci:

// Tradiční způsob - musíš psát konfiguraci
<Route path="/blog" component={BlogPage} />
<Route path="/kontakt" component={ContactPage} />
<Route path="/produkty/:id" component={ProductDetail} />

Tohle je:

• Zdlouhavé — každou cestu musíš ručně definovat
• Náchylné k chybám — snadno zapomeneš přidat route
• Těžko udržovatelné — konfigurace se může rozrůst do obřích souborů

Jak funguje file-based routing?

Next.js tento problém řeší elegantně: struktura složek = struktura URL. Nepotřebuješ psát žádnou konfiguraci.

Pravidlo je jednoduché:

• Vytvoř složku → vytvoří se cesta
• Přidej page.js do složky → vytvoří se stránka na té cestě

To se nazývá file-based routing (routing založený na souborech).

K čemu to slouží?

• Rychlý vývoj — vytvoření nové stránky = vytvoření složky a souboru
• Přehlednost — když hledáš kód pro /blog, víš, že je v app/blog/
• Méně chyb — nemůžeš zapomenout přidat route do konfigurace
• Jednodušší refaktoring — přejmenování složky = přejmenování URL (automaticky)

Praktické příklady struktury

app/
├─ page.js              # → /
├─ about/
│  └─ page.js           # → /about
├─ blog/
│  ├─ page.js           # → /blog
│  └─ [slug]/
│     └─ page.js        # → /blog/prvni-clanek, /blog/druhy-clanek atd.
└─ products/
   ├─ page.js           # → /products
   └─ [id]/
      └─ page.js        # → /products/1, /products/2 atd.

Poznámka: Hranaté závorky [slug] nebo [id] označují dynamické segmenty — o těch se dozvíš víc v další lekci o dynamických routách.

JavaScript

// app/products/page.js -> /products
export default function Products(){ return <div>Products</div> }

TypeScript

export default function Products(): JSX.Element{ return <div>Products</div> }

Rozdíl JS vs TS

Stejný princip; TS přidává typy, ale routing je nezávislý na jazyce.

Tip

• Použij logické názvy složek, vyhni se mezerám a diakritice v cestách (např. raději clanek než článek).
• Složky můžeš vnořovat do sebe libovolně hluboko — Next.js to automaticky promítne do URL.