Next.js: cos'è, come funziona e quando usarlo

Cos'è Next.js — la risposta che manca sempre

Se cerchi "cos'è Next.js" online, trovi quasi sempre la stessa risposta: "un framework React per applicazioni full-stack". È corretta ma non dice molto a chi parte da zero.

Next.js è uno strato costruito sopra React che risolve i problemi che React da solo non risolve. React è una libreria per costruire interfacce — gestisce i componenti e lo stato, ma non si occupa di routing, ottimizzazione, SEO, o come servire la tua applicazione al browser. Next.js aggiunge tutto questo, con scelte già fatte e configurazione minima.

Usare Next.js significa usare React — con più funzionalità e un modo preciso di organizzare il progetto.

Cos'è React e perché Next.js esiste

Per capire Next.js serve capire cosa manca a React da solo.

React è una libreria JavaScript per costruire interfacce utente. Gestisce il rendering dei componenti nel browser e aggiorna il DOM quando i dati cambiano. Non ha un sistema di routing integrato, non sa come ottimizzare le immagini, non gestisce il SEO, e non si occupa di come il server risponde alle richieste.

Un'applicazione React pura è una Single Page Application (SPA): il server serve un file HTML quasi vuoto, il browser scarica JavaScript, e React costruisce l'interfaccia lato client. Il risultato è che i motori di ricerca vedono una pagina vuota — il contenuto arriva dopo, generato da JavaScript.

Next.js nasce per risolvere questo e altri problemi. Aggiunge rendering server-side, routing basato su file, ottimizzazione automatica di immagini e font, e molto altro — tutto integrato e configurato per funzionare insieme.

Come funziona Next.js: i tre modi di renderizzare una pagina

La cosa che distingue Next.js da React è dove e quando le pagine vengono generate. Ci sono tre approcci, e Next.js li supporta tutti — anche nello stesso progetto.

Server Side Rendering (SSR)

La pagina viene generata sul server ad ogni richiesta. Quando un utente visita /blog/articolo-1, il server esegue il codice, recupera i dati, costruisce l'HTML completo, e lo invia al browser. Il browser riceve una pagina già pronta — non JavaScript da eseguire.

Vantaggi: SEO eccellente (i motori di ricerca vedono il contenuto), tempo al primo contenuto visibile basso, dati sempre aggiornati.

Svantaggi: ogni richiesta richiede lavoro sul server — più lento di un file statico, richiede un server Node.js attivo.

Static Site Generation (SSG)

Le pagine vengono generate una sola volta, al momento del build. Il risultato sono file HTML statici che il server serve direttamente, senza lavoro computazionale per ogni richiesta.

Vantaggi: velocità massima, può essere servito da qualsiasi CDN senza server Node.js, costi minimi.

Svantaggi: il contenuto si aggiorna solo al prossimo build — non adatto per dati che cambiano frequentemente.

Client Side Rendering (CSR)

Come React puro — il browser scarica JavaScript e costruisce l'interfaccia lato client. Next.js supporta questo approccio per le parti dell'applicazione che non hanno bisogno di SEO o rendering server-side.

La potenza di Next.js è che puoi mescolare i tre approcci nella stessa applicazione: le pagine pubbliche con SSR o SSG per il SEO, le dashboard interne con CSR per la reattività.

L'App Router: il cuore di Next.js moderno

Dalla versione 13, Next.js ha introdotto l'App Router — un nuovo sistema di routing e rendering che rappresenta un cambiamento architetturale significativo.

Il routing è basato sulla struttura delle cartelle. Un file app/blog/[slug]/page.tsx corrisponde automaticamente alla route /blog/qualsiasi-slug. Non serve configurare nulla — la struttura delle directory è la configurazione.

La novità più importante è i React Server Components: componenti che girano esclusivamente sul server, non nel browser. Possono accedere direttamente al database, leggere file, chiamare API — senza esporre questi dati al client e senza JavaScript aggiuntivo nel bundle del browser.

export default async function BlogPost({ params }: { params: { slug: string } }) {
  const post = await db.post.findUnique({ where: { slug: params.slug } })

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  )
}

Questo componente gira sul server, accede al database direttamente, e invia al browser solo l'HTML risultante — nessun JavaScript, nessuna chiamata API separata.

Cos'è il Pages Router e perché ne senti ancora parlare

Prima dell'App Router esisteva il Pages Router — il sistema di routing originale di Next.js, ancora supportato e usato da milioni di applicazioni.

Nel Pages Router, i file in pages/ corrispondono alle route: pages/blog/[slug].tsx diventa /blog/qualsiasi-slug. I dati vengono caricati con funzioni speciali come getServerSideProps (SSR) o getStaticProps (SSG).

Se trovi tutorial o codice Next.js con getServerSideProps o la cartella pages/, stai guardando il Pages Router. Funziona ancora bene ed è supportato a lungo termine, ma per i nuovi progetti la scelta raccomandata è l'App Router.

Next.js e SEO: perché è importante

Uno dei motivi principali per scegliere Next.js rispetto a React puro è il SEO.

I motori di ricerca indicizzano il contenuto HTML che trovano quando visitano una pagina. Con React puro (SPA), l'HTML iniziale è quasi vuoto — il contenuto viene generato da JavaScript dopo il caricamento. Anche se Google è migliorato nel leggere JavaScript, le pagine con HTML pre-renderizzato si indicizzano in modo più affidabile e veloce.

Con Next.js in SSR o SSG, il server invia al browser (e a Googlebot) l'HTML completo con tutto il contenuto già presente. È la stessa differenza che c'è tra consegnare a qualcuno un libro già scritto o chiedergli di aspettare che lo scrivi davanti a lui.

Questo sito — ekulos.com — è costruito esattamente su questo stack: Next.js 16 App Router, contenuti in MDX versionati in Git, SEO tecnica con JSON-LD generato dinamicamente per ogni pagina, deploy automatizzato via Docker e GitHub Actions. Tutte le pagine sono pre-renderizzate a build time con generateStaticParams — nessun lavoro a runtime, Time to First Byte minimi, contenuto HTML completo visibile a Google dal primo crawl. Ho documentato tutte le scelte architetturali, incluso cosa ho scelto di non fare, nel case study di ekulos.com.

Quando ha senso scegliere Next.js

Next.js è la scelta naturale quando:

• Stai costruendo qualcosa di pubblico che deve essere trovato su Google — sito aziendale, blog, e-commerce, portale
• Vuoi un'applicazione React con routing, ottimizzazione e SEO senza configurare tutto da zero
• Il tuo team lavora già con React e vuole aggiungere rendering server-side senza cambiare stack
• Stai costruendo qualcosa che crescerà nel tempo e vuoi le fondamenta giuste dall'inizio

Non è necessario quando stai costruendo dashboard interne, applicazioni aziendali per dipendenti, o tool che non devono essere indicizzati — in quei casi React puro è spesso più semplice e sufficiente.

Per un confronto approfondito tra i due, con casi d'uso concreti e codice reale, ho scritto un articolo dedicato su React vs Next.js.

Da dove iniziare

Creare un progetto Next.js richiede un comando:

npx create-next-app@latest mio-progetto

L'installer chiede se vuoi TypeScript, ESLint, Tailwind CSS, e se usare l'App Router — per un nuovo progetto nel 2026, la risposta raccomandata è sì a tutti. In pochi secondi hai un progetto funzionante con tutto configurato.

La documentazione ufficiale su nextjs.org è tra le migliori nell'ecosistema JavaScript — chiara, aggiornata, con esempi pratici per ogni caso d'uso.