Co je Next.js a co přidává navíc oproti Reactu?

Question

Accepted Answer

**Next.js** je full-stack React **framework**. React sám o sobě je jen UI knihovna — vykresluje komponenty, ale routing, fetch dat, server rendering a build tooling nechává na vás. Next.js poskytuje všechno to z krabice navíc s server runtime. ## Co React sám schází (a Next.js přidává) ```text React (library) → Next.js (framework) adds: ────────────────────────────────────────────────── UI rendering only → File-based routing (folders = routes) Client-side rendering → Server rendering (SSR), static generation (SSG), ISR You wire data fetching → Built-in data fetching + caching No backend → API routes / Route Handlers (full-stack) Manual bundling → Zero-config build, code splitting, optimization Manual → next/image (auto-optimized images), next/font ``` ## Konkrétní příklad: route je jen soubor ```tsx // app/about/page.tsx → automatically served at /about export default function About() { return

About us

; } ``` V běžném Reactu byste nainstalovali router, nakonfigurovali routes a nastavili build. V Next.js je vytvoření souboru samotná route. ## Proč si jej týmy vybírají - **SEO & výkon** — server-rendered HTML znamená, že obsah je v počáteční odpovědi (dobré pro crawlery a rychlou first paint), na rozdíl od client-only React SPA, která posílá prázdnou stránku a pak hydratuje. - **Full-stack v jednom projektu** — frontend a backend (API routes, Server Actions) žijí společně. - **Production-ready defaults** — automatické code splitting, optimalizace obrázků/fontů, caching. ## Proč je to důležité Next.js je nejpopulárnější React framework, protože mění React z UI knihovny na kompletní aplikační platformu — zpracovává strategii vykreslování, routing, data a backend, takže se můžete soustředit na features místo technických detailů. Je výchozí volbou, když potřebujete SEO, výkon nebo server-side logiku s Reactem.