Ce este Next.js și ce adaugă peste React?

Question

Accepted Answer

**Next.js** este un **framework** React full-stack. React în sine este doar o bibliotecă UI — redă componente, dar lasă routing, data fetching, server rendering și build tooling ție. Next.js oferă toate acestea din cutie, plus un server runtime. ## Ce React singur omite (și Next.js adaugă) ```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 ``` ## Un exemplu concret: o rută este doar un fișier ```tsx // app/about/page.tsx → automatically served at /about export default function About() { return

About us

; } ``` În React simplu, ai instala un router, ai configura rutele și ai configura o construcție. În Next.js, crearea fișierului *este* ruta. ## De ce echipele o aleg - **SEO și performance** — HTML render pe server înseamnă că conținutul se află în răspunsul inițial (bun pentru crawlere și first paint rapid), spre deosebire de un SPA React doar pentru client care trimite o pagină goală și apoi hidratează. - **Full-stack într-un singur proiect** — frontend și backend (API routes, Server Actions) convietuiesc. - **Implicite gata pentru producție** — code splitting automat, optimizare imagini/fonturi, caching. ## De ce conteaza Next.js este cel mai popular framework React deoarece transformă React de la o bibliotecă UI la o platformă de aplicație completă — gestionând strategie de rendering, routing, date și un backend, deci te poți concentra pe funcții în loc de infrastructură. Este alegerea implicită atunci când ai nevoie de SEO, performance sau logică pe server cu React.