React & Next.js — vysoce výkonné webové aplikace
React 18 a Next.js 15 (App Router) používáme ve všech frontendových projektech: od prezentačních webů až po komplexní SaaS s desítkami tisíc uživatelů. Kód je v přísném TypeScriptu, testy jsou automatizované.
Proč Next.js pro naše projekty
Next.js 15 s App Routerem nabízí jedinečný hybridní model: statické stránky (SSG) se servírují z CDN, dynamické stránky běží jako Server Components, které do prohlížeče neposílají zbytečný JavaScript, a stránky s daty v reálném čase využívají izolované Client Components.
Obrázky se automaticky optimalizují komponentou `<Image>` (WebP/AVIF, responzivní srcSet, lazy-loading), fonty jsou vložené do kritického CSS pomocí `next/font` a skripty třetích stran se načítají podle priorit.
- Server Components pro marketingové stránky — žádný JS na klientovi, kompletní HTML už v odpovědi serveru
- Streaming SSR se Suspense pro dashboardy s živými daty
- Incremental Static Regeneration (ISR) pro polodynamický obsah
- Route Groups a Parallel Routes pro složité layouty bez zbytečného re-renderu
Přísný TypeScript — žádné tiché chyby
Všechny naše projekty používají TypeScript s `strict: true`, `noImplicitAny`, `exactOptionalPropertyTypes` a `noUncheckedIndexedAccess`. Tato nastavení už při kompilaci zablokují celé kategorie runtime chyb: přístup k undefined, neúplné typy u odpovědí API, chybná porovnání. Typický projekt má v CI před spuštěním jakéhokoli testu 0 chyb TypeScriptu.
Pro správu stavu používáme Zustand (lehký, bez boilerplate) nebo React Context pro lokální stav. Načítání dat zajišťuje TanStack Query (automatická cache, inteligentní invalidace, stale-while-revalidate). Formuláře řešíme přes React Hook Form + validaci schématem Zod — synchronní i asynchronní validace bez duplicitního kódu.
- ESLint s vlastními pravidly pro zakázané vzory (any, console.log, magic strings)
- Prettier s jednotnou konfigurací — žádný PR není zamítnut kvůli formátování
- Zod pro runtime validaci dat z externích API
- Path aliasy (`@/components/...`) — přehledné importy bez `../../..`
Automatizované testování a CI/CD
Unit testy s Vitestem (rychlý, kompatibilní s API Jestu), testy komponent s React Testing Library, E2E s Playwrightem ve 3 prohlížečích (Chromium, Firefox, WebKit). Pipeline v GitHub Actions spouští všechny testy u každého PR; merge je zablokován, pokud některý selže. Minimální pokrytí je 80 % u business logiky.
- Lighthouse CI — skóre pod 90 zablokuje nasazení na staging
- Automatický bundle analyzer — upozornění, pokud bundle naroste o více než 5 % oproti main
- Storybook pro UI komponenty — živá vizuální dokumentace
Výhody a omezení
Výhody
- Automatická optimalizace obrázků (WebP/AVIF) a fontů (next/font) přímo ve frameworku.
- Nativní SSR a SSG — kompletní HTML už v odpovědi serveru, bez čekání na JavaScript.
- Přísný TypeScript zachytí chyby při kompilaci, ne v produkci.
- Vyspělý ekosystém: Vercel, tisíce balíčků, obrovská komunita.
Omezení
- Křivka učení App Routeru a Server Components je strmá.
- Časté změny mezi hlavními verzemi — vyžaduje údržbu.
- Pro jednoduchý statický web může být Next.js oproti čistému HTML zbytečně těžký.
- Velké buildy prodlužují čas kompilace a zvyšují náklady na CI.
Stručný verdikt
React a Next.js zvolte pro weby a webové aplikace, které musí být rychlé, indexovatelné a škálovatelné. Pro jednu statickou landing page bez interaktivity stačí jednodušší řešení.
Tabulka specifikací
| Schopnost | Limit / práh | Typické použití | |
|---|---|---|---|
| Vykreslování | SSR, SSG, ISR, CSR | Server Components omezují API prohlížeče | Statický marketing + dynamický dashboard |
| Výkon | Optimalizace obrázků (WebP/AVIF, lazy-loading) a fontů (next/font) | JS pro hydrataci roste s interaktivitou | Weby s vysokou návštěvností, kritické SEO |
| Škálování | Desítky tisíc uživatelů, edge CDN | Vyžaduje hosting s Node nebo serverless | SaaS, portály, e-commerce |
| Typické náklady | Open source, hosting od ~0 € | Serverless funkce se účtují podle využití | Od malých projektů po enterprise |
Next.js vs. alternativy
| Kritérium | Next.js | Nuxt / Astro / Vite |
|---|---|---|
| SSR + SSG v jednom frameworku | Ano, nativně | Částečně (Nuxt ano, Vite ne) |
| Ekosystém Reactu | Kompletní | Vue (Nuxt) nebo multi-framework (Astro) |
| Optimální pro čistě statický web | Dobrý | Astro je lehčí |
Často kladené otázky
Proč Next.js a ne čistý React (Vite)?
React s Vite vykresluje jen na klientovi, takže počáteční HTML je prázdné a obsah se objeví až po spuštění JavaScriptu. Next.js přidává SSR a SSG a dodává kompletní HTML už v odpovědi serveru.
Je Next.js dobrý pro SEO?
Ano. SSR/SSG dodává indexovatelné HTML; metadata i JSON-LD se generují na serveru, takže jsou součástí první odpovědi.
Mohu stávající web migrovat na Next.js?
Ano, postupně: stránky se přesouvají jedna po druhé a zachovávají se URL i přesměrování 301, aby nedošlo ke ztrátě pozic v Googlu.
Jaký hosting Next.js potřebuje?
Statické stránky běží na libovolném CDN. Dynamické funkce (SSR, API routes) potřebují Node.js nebo serverless runtime, například Vercel, Netlify či kontejner Docker.