React & Next.js — Applicazioni web ad alte prestazioni
Usiamo React 18 e Next.js 15 (App Router) su tutti i progetti frontend: dai siti vetrina ai SaaS complessi con decine di migliaia di utenti. Il codice è TypeScript in modalità strict, i test sono automatizzati e il rilascio passa dalla pipeline CI/CD.
Perché Next.js per i nostri progetti
Next.js 15 con App Router offre un modello ibrido unico: le pagine statiche (SSG) vengono servite dalla CDN, le pagine dinamiche girano come Server Components che non inviano JavaScript superfluo al browser e le pagine con dati in tempo reale usano Client Components isolati.
Le immagini vengono ottimizzate automaticamente dal componente `<Image>` (WebP/AVIF, srcSet responsive, lazy loading), i font sono inseriti inline nel CSS critico con `next/font` e gli script di terze parti si caricano con strategie di priorità.
- Server Components per le pagine marketing: zero JS lato client
- Streaming SSR con Suspense per le dashboard con dati live
- Incremental Static Regeneration (ISR) per i contenuti semi-dinamici
- Route Groups e Parallel Routes per layout complessi senza re-render
TypeScript strict: nessun bug silenzioso
Tutti i nostri progetti usano TypeScript con `strict: true`, `noImplicitAny`, `exactOptionalPropertyTypes` e `noUncheckedIndexedAccess`. Queste impostazioni bloccano in compilazione intere categorie di bug a runtime: accesso a undefined, tipi incompleti sulle risposte delle API, confronti sbagliati. Un progetto tipico arriva in CI con 0 errori TypeScript prima ancora di eseguire un test.
Per la gestione dello stato usiamo Zustand (leggero, senza boilerplate) oppure React Context per lo stato locale. Il data fetching passa da TanStack Query (cache automatica, invalidazione intelligente, stale-while-revalidate). I moduli si basano su React Hook Form con validazione tramite schema Zod: controlli sincroni e asincroni senza duplicare codice.
- ESLint con regole personalizzate per i pattern vietati (any, console.log, stringhe magiche)
- Prettier con configurazione uniforme: nessuna PR respinta per la formattazione
- Zod per validare a runtime i dati provenienti da API esterne
- Alias di percorso (`@/components/...`): import chiari senza `../../..`
Test automatici e CI/CD
Test unitari con Vitest (veloce, compatibile con l'API di Jest), test dei componenti con React Testing Library, E2E con Playwright su 3 browser (Chromium, Firefox, WebKit). La pipeline GitHub Actions esegue tutti i test a ogni PR; il merge viene bloccato se anche uno solo fallisce. Copertura minima dell'80% sulla logica di business.
- Lighthouse CI: un punteggio inferiore a 90 blocca il rilascio su staging
- Bundle analyzer automatico: avviso se il bundle cresce di oltre il 5% rispetto a main
- Storybook per i componenti UI: documentazione visiva sempre aggiornata
Vantaggi e limiti
Vantaggi
- Lighthouse CI nella pipeline: un punteggio sotto 90 blocca il rilascio.
- SSR e SSG nativi: HTML completo generato dal server, leggibile dai crawler.
- TypeScript strict intercetta i bug in compilazione, non in produzione.
- Ecosistema maturo: Vercel, migliaia di pacchetti, una community enorme.
Limiti
- La curva di apprendimento di App Router e Server Components è ripida.
- Cambiamenti frequenti tra le versioni major: richiede manutenzione costante.
- Per un sito statico semplice, Next.js può essere sovradimensionato rispetto all'HTML puro.
- Le build di grandi dimensioni allungano i tempi di compilazione e il costo della CI.
Verdetto in breve
Scegli React e Next.js per siti e applicazioni web che devono essere veloci, indicizzabili e scalabili. Per una singola landing page statica senza interattività basta una soluzione più semplice.
Tabella delle specifiche
| Capacità | Limite / soglia | Uso tipico | |
|---|---|---|---|
| Rendering | SSR, SSG, ISR, CSR | I Server Components limitano le API del browser | Marketing statico + dashboard dinamica |
| Prestazioni | Lighthouse CI con soglia minima di 90 | Il JS di idratazione cresce con l'interattività | Siti ad alto traffico, SEO critica |
| Scalabilità | Decine di migliaia di utenti, CDN edge | Richiede hosting Node o serverless | SaaS, portali, e-commerce |
| Costo tipico | Open source, hosting da circa 0 € | Le funzioni serverless si pagano a consumo | Dai piccoli progetti all'enterprise |
Next.js a confronto con le alternative
| Criterio | Next.js | Nuxt / Astro / Vite |
|---|---|---|
| SSR + SSG in un unico framework | Sì, in modo nativo | In parte (Nuxt sì, Vite no) |
| Ecosistema React | Completo | Vue (Nuxt) o multi-framework (Astro) |
| Ottimale per un sito puramente statico | Buono | Astro è più leggero |
Domande frequenti
Perché Next.js e non React da solo (Vite)?
React con Vite esegue il rendering solo sul client, quindi l'HTML iniziale è vuoto: penalizzante per SEO e GEO. Next.js aggiunge SSR e SSG e consegna un HTML completo, leggibile dai crawler fin dalla prima risposta.
Next.js è adatto alla SEO?
Sì. SSR/SSG consegnano HTML indicizzabile, i metadati e il JSON-LD sono generati sul server e i Core Web Vitals sono controllati dalla pipeline di rilascio con Lighthouse CI: tutti segnali forti per il posizionamento.
Posso migrare un sito esistente a Next.js?
Sì, in modo incrementale: le pagine vengono spostate una alla volta mantenendo URL e redirect 301 verso le nuove pagine.
Di quale hosting ha bisogno Next.js?
Le pagine statiche funzionano su qualsiasi CDN. Le funzioni dinamiche (SSR, route API) richiedono Node.js o un runtime serverless come Vercel, Netlify o un container Docker.