Routování, server-side rendering (SSR), client-side rendering (CSR), file-based routing

Formát: 30 min praktická úloha, 15 min obhajoba + teorie. Teorie pokrývá Next.js App Router, rendering modely a moderní features. Praktika: blog s dynamickou routou, klientskou stránkou a API routes.

Část 1: Teorie

Co je Next.js a proč ho používáme

Next.js je React framework od firmy Vercel. Přidává nad React věci, které samotný React neumí.

Funkce Plain React (Vite, CRA) Next.js
Routování Nutná knihovna (react-router) Automatické z file systému
SSR Žádné (vždy CSR) Výchozí chování
SEO Špatné (prázdný HTML skeleton) Hotové HTML rovnou
API endpointy Nutný separátní backend route.ts ve stejném projektu
Optimalizace obrázků Manuální <Image /> komponenta
Optimalizace fontů Manuální next/font
Code splitting Manuální config Automaticky podle stránky

Kdy Next.js: e-shop, blog, marketing web, firemní web, kdykoli záleží na SEO a rychlosti načtení.

Kdy plain React: interní dashboardy, admin panely, aplikace za přihlášením, kdy SEO nehraje roli.

Pages Router vs App Router

Next.js má dva systémy routování. Důležité vědět který se používá.

Pages Router (legacy) App Router (moderní)
Složka pages/ app/
Verze Od Next.js 1 Next.js 13+ (2022)
Stabilní Ano, dlouho Od Next.js 13.4 (2023)
Server Components Ne Ano
Streaming Ne Ano
Data fetching getServerSideProps / getStaticProps async komponenty + fetch

Pro nový projekt používej App Router, je to současný standard. Tahle otázka je o něm.

App Router: file-based routing

Next.js vytváří routy automaticky ze složkové struktury uvnitř app/. Každá složka = segment URL. Každý page.tsx = stránka dostupná na té URL.

app/
├── page.tsx              →  /
├── about/
│   └── page.tsx          →  /about
├── blog/
│   ├── page.tsx          →  /blog
│   └── [slug]/
│       └── page.tsx      →  /blog/:slug         (dynamická)
├── shop/
│   └── [category]/
│       └── [id]/
│           └── page.tsx  →  /shop/:category/:id (vnořená dynamická)
├── api/
│   └── hello/
│       └── route.ts      →  GET/POST /api/hello (API endpoint)
└── layout.tsx            →  sdílený layout

Speciální soubory

Soubor K čemu
page.tsx Obsah stránky na dané URL
layout.tsx Obal stránky, přetrvává při navigaci (navbar, footer)
route.ts API endpoint (nahrazuje backend)
loading.tsx Skeleton/spinner zobrazovaný při načítání
error.tsx Chybová stránka pro daný segment
not-found.tsx Vlastní 404
template.tsx Jako layout, ale překresluje se při navigaci
middleware.ts Spustí se před každým requestem (auth, redirect)

Vnořené routy a layouty