Sviluppo Next.js: siti, e-commerce e portali ad alte prestazioni

Perché sviluppiamo in Next.js

Next.js è il framework su cui costruiamo la quasi totalità dei progetti web che devono essere trovati su Google e caricarsi in meno di un secondo. Non è una scelta di moda: è che risolve in un unico strumento tre problemi che di solito richiedono tre stack diversi — rendering lato server per la SEO, generazione statica per la velocità, e un backend integrato per le API.

Il vantaggio pratico per chi commissiona il lavoro è la riduzione dei pezzi in movimento. Un solo repository, un solo linguaggio (TypeScript) dal database al bottone, un solo deploy. Meno superficie di manutenzione significa meno costo nel tempo e meno dipendenza da figure specialistiche diverse.

SSR, SSG e ISR: quale rendering per quale pagina

La forza di Next.js è poter decidere pagina per pagina come viene prodotto l'HTML, invece di subire una scelta globale. Le pagine editoriali e le schede prodotto stabili vengono generate staticamente in fase di build: arrivano al browser come file già pronti, con tempi di risposta nell'ordine delle decine di millisecondi. È il caso di questo sito, interamente statico.

Le pagine che dipendono dall'utente — area riservata, carrello, portale B2B con listini personalizzati — vengono renderizzate lato server a ogni richiesta, così il contenuto è sempre coerente con i permessi di chi guarda. Nel mezzo c'è l'ISR (Incremental Static Regeneration): pagine statiche che si rigenerano da sole a intervalli o su webhook, la soluzione giusta per cataloghi con migliaia di articoli che cambiano prezzo ma non ogni secondo.

Questa granularità è il motivo per cui un e-commerce headless in Next.js regge picchi di traffico senza scalare il server: la maggior parte delle richieste non tocca mai il codice applicativo.

Next.js per e-commerce e portali B2B

Su progetti commerciali usiamo Next.js in modalità headless: la vetrina è nostra, il motore di catalogo e ordini resta dove è già — PrestaShop, WooCommerce o direttamente il gestionale. Il frontend interroga le API, applica la logica di listino e presenta le pagine, senza ereditare il peso dei temi e dei moduli tipici delle piattaforme monolitiche.

Il guadagno si misura: pagine prodotto che passano da qualche secondo a poche centinaia di millisecondi, e un controllo totale su URL, markup strutturato e meta tag. Abbiamo raccontato il confronto in Next.js vs PrestaShop e in Next.js vs WordPress.

Sui portali B2B il rendering server-side è quello che permette di mostrare a ogni rivenditore i suoi prezzi reali senza esporre listini altrui: vedi il case study del portale B2B collegato al gestionale.

Core Web Vitals e SEO tecnica

Next.js non rende un sito veloce da solo: rende possibile farlo bene. Le leve che usiamo sistematicamente sono l'ottimizzazione automatica delle immagini in AVIF e WebP con dimensioni esplicite per azzerare il layout shift, i font self-hosted per eliminare la richiesta a domini terzi, il CSS critico inline e il code splitting per rotta.

Sul lato SEO, la Metadata API permette di generare title, description, canonical, Open Graph e dati strutturati JSON-LD in modo programmatico a partire dai dati: su un catalogo di centinaia di pagine è l'unico modo per avere metadati coerenti senza compilarli a mano. Sitemap e robots vengono generati dal codice, quindi restano allineati ai contenuti per costruzione.

Quando Next.js non è la scelta giusta

Se il progetto è un sito vetrina di cinque pagine che il cliente vuole modificare da solo ogni settimana, e non ci sono integrazioni, un CMS tradizionale costa meno e va benissimo. Lo diciamo prima, non dopo il preventivo.

Next.js conviene quando c'è almeno uno di questi elementi: molte pagine generate da dati, integrazione con un gestionale, requisiti di performance o accessibilità stringenti, oppure un'applicazione vera dietro la vetrina. Sotto quella soglia si paga complessità senza incassarne il beneficio.

Domande frequenti su Next.js

Che differenza c'è tra Next.js e React?

React è la libreria che disegna l'interfaccia; Next.js è il framework che ci costruisce intorno tutto il resto: routing, rendering lato server, generazione statica, ottimizzazione delle immagini, API. Con React da solo si ottiene un'applicazione che il motore di ricerca fatica a leggere; con Next.js si ottiene un sito indicizzabile.

Un sito in Next.js è buono per la SEO?

Sì, ed è uno dei motivi principali per cui lo usiamo. L'HTML arriva al crawler già completo, senza attendere l'esecuzione del JavaScript, e la gestione di metadati, canonical, sitemap e dati strutturati è nativa. Resta comunque il contenuto a fare la differenza: il framework toglie gli ostacoli tecnici, non scrive le pagine al posto tuo.

Il cliente può aggiornare i contenuti da solo?

Sì, collegando un CMS headless (Strapi, Sanity, Contentful) o il gestionale già in uso. Next.js rigenera le pagine interessate al salvataggio, senza ricostruire tutto il sito. Se i contenuti cambiano una volta l'anno, spesso conviene tenerli nel codice e risparmiare il costo del CMS.

Dove si ospita un'applicazione Next.js?

La usiamo su Vercel per il deploy edge e i preview automatici, ma non c'è alcun vincolo: gira anche in container Docker su un VPS, su AWS o su un'infrastruttura del cliente. Sceglierlo non significa restare legati a un fornitore.

Si può migrare un sito WordPress o PrestaShop esistente a Next.js?

Sì, ed è uno scenario frequente. Si può procedere per gradi, mantenendo la piattaforma esistente come backend dei contenuti e sostituendo prima il frontend. È importante pianificare la mappa dei redirect 301 per non perdere il posizionamento già acquisito.