React & Next.js — Applicazioni web ad alte prestazioni
Usiamo React 18 e Next.js 15 (App Router) per la piattaforma 4myevents: il sito di presentazione e il pannello del team organizzativo, con eventi, tipologie di biglietto, partecipanti, check-in, agenda e report. Il codice è in TypeScript strict, i test sono automatizzati, il deployment è zero-downtime.
Perché Next.js per i nostri progetti
Next.js 15 con App Router offre un modello ibrido unico: le pagine statiche (SSG) vengono servite istantaneamente dalla CDN, le pagine dinamiche girano come Server Components che non inviano JavaScript superfluo al browser, e le pagine in tempo reale usano Client Components isolati. Il risultato è un punteggio Lighthouse di 95+ out-of-the-box, senza trucchi.
Le immagini vengono ottimizzate automaticamente tramite il componente `<Image>` (WebP/AVIF, srcSet responsive, lazy-loading), i font sono inseriti nel CSS critico con `next/font` e gli script di terze parti si caricano con strategie di priorità. Insieme, queste ottimizzazioni portano l'LCP sotto i 2,5 secondi su reti 4G reali.
- Server Components per le pagine del sito di presentazione — zero JS lato client, crawling istantaneo
- Streaming SSR con Suspense per le schermate con dati caricati progressivamente
- Incremental Static Regeneration (ISR) per articoli del blog e pagine di contenuto — senza rebuild
- 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 fase di compilazione intere categorie di bug di runtime: accessi a valori undefined, tipi incompleti nelle risposte API, confronti errati. Un progetto tipico ha 0 errori TypeScript in CI prima di qualsiasi test.
Per la gestione dello stato usiamo Zustand (leggero, senza boilerplate) o React Context per lo stato locale. Il data fetching è gestito tramite TanStack Query (cache automatica, invalidazione intelligente, stale-while-revalidate). Form con React Hook Form + validazione dello schema con Zod — validazione sincrona e asincrona senza codice duplicato.
- ESLint con regole personalizzate per i pattern vietati (any, console.log, magic string)
- Prettier con configurazione uniforme — nessuna PR respinta per la formattazione
- Zod per la validazione a runtime dei dati provenienti da API esterne
- Path alias (`@/components/...`) — import puliti senza `../../..`
Test automatizzati e CI/CD
Unit test 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 è bloccato se uno fallisce. Copertura minima dell'80% sulla logica di business.
- Lighthouse CI — un punteggio <90 blocca il deploy in staging
- Bundle analyser automatico — avviso se il bundle cresce >5% rispetto a main
- Storybook per i componenti UI — documentazione visiva sempre aggiornata
Vantaggi e limiti
Vantaggi
- Lighthouse 95+ dal primo giorno, senza tuning manuale.
- SSR e SSG nativi — HTML completo per Google e per i motori AI.
- 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.
- Breaking change frequenti tra versioni major — richiede manutenzione.
- Per un sito statico semplice, Next.js può essere eccessivo rispetto al semplice HTML.
- Build di grandi dimensioni aumentano i tempi di compilazione e i costi di CI.
Verdetto in breve
Scegli React & Next.js per siti e applicazioni web che devono essere veloci, indicizzabili e scalabili. Per una singola landing page statica senza interattività basta uno strumento più semplice.
Tabella delle specifiche
| Funzionalità | Limite / soglia | Uso tipico | |
|---|---|---|---|
| Rendering | SSR, SSG, ISR, CSR | I Server Components limitano le API del browser | Marketing statico + dashboard dinamica |
| Prestazioni | LCP < 2,5s, Lighthouse 95+ | Il JS di idratazione cresce con l'interattività | Siti ad alto traffico, critici per la SEO |
| Scalabilità | Decine di migliaia di utenti, CDN edge | Richiede hosting Node o serverless | SaaS, portali, piattaforme di gestione eventi |
| Costo tipico | Open-source, hosting da ~0 € | Funzioni serverless fatturate a consumo | Da piccoli progetti all'enterprise |
Next.js a confronto con le alternative
| Criterio | Next.js | Nuxt / Astro / Vite |
|---|---|---|
| SSR + SSG in un unico framework | Sì, nativo | Parziale (Nuxt sì, Vite no) |
| Ecosistema React | Completo | Vue (Nuxt) o multi-framework (Astro) |
| Ideale per un sito puramente statico | Buono | Astro è più leggero |
Domande frequenti
Perché Next.js e non React puro (Vite)?
React con Vite esegue il rendering solo lato client, quindi l'HTML iniziale è vuoto — pessimo per SEO e GEO. Next.js aggiunge SSR e SSG e invia HTML completo che Google e i motori AI leggono subito.
Next.js è valido per la SEO?
Sì. SSR/SSG inviano HTML indicizzabile, metadati e JSON-LD vengono generati sul server e i Core Web Vitals sono verdi per costruzione — tutti segnali di ranking forti.
Posso migrare un sito esistente a Next.js?
Sì, in modo incrementale: le pagine si spostano una alla volta, mantenendo gli URL e i redirect 301 in modo da non perdere i posizionamenti su Google.
Di quale hosting ha bisogno Next.js?
Le pagine statiche girano su qualsiasi CDN. Le funzionalità dinamiche (SSR, API routes) richiedono Node.js o un runtime serverless come Vercel, Netlify o un container Docker.