Cos'è Next.js e cosa aggiunge a React?

Question

Accepted Answer

**Next.js** è un **framework** React full-stack. React di per sé è solo una libreria UI — renderizza componenti ma ti lascia a te routing, data fetching, server rendering e build tooling. Next.js fornisce tutto questo fin da subito, più un runtime server. ## Cosa React da solo non include (e Next.js aggiunge) ```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 esempio concreto: una route è solo un file ```tsx // app/about/page.tsx → automatically served at /about export default function About() { return

About us

; } ``` In plain React installeresti un router, configureresti le route e configureresti una build. In Next.js, creare il file *è* la route. ## Perché i team lo scelgono - **SEO e performance** — HTML renderizzato lato server significa che il contenuto è nella risposta iniziale (buono per i crawler e per il primo paint veloce), a differenza di una SPA React client-only che invia una pagina vuota e poi effettua l'idratazione. - **Full-stack in un solo progetto** — il frontend e il backend (API routes, Server Actions) vivono insieme. - **Impostazioni production-ready** — code splitting automatico, ottimizzazione di immagini/font, caching. ## Perché è importante Next.js è il framework React più popolare perché trasforma React da una libreria UI a una piattaforma applicativa completa — gestendo la strategia di rendering, routing, dati e un backend in modo che tu ti concentri sulle funzionalità invece che sulla plumbing. È la scelta predefinita quando hai bisogno di SEO, performance o logica lato server con React.