React & Next.js — Applicazioni web ad alte prestazioni
Usiamo React 18 e Next.js 15 (App Router) per l'intera piattaforma 4lawyers: le pagine di presentazione dello studio legale, il calendario delle pratiche, i fascicoli dei clienti e la dashboard dello studio. Il codice è in TypeScript rigoroso, i test sono automatizzati e il deploy avviene senza interruzioni.
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, quelle 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+ già di base, senza trucchi.
Le immagini vengono ottimizzate automaticamente tramite il componente `<Image>` (WebP/AVIF, srcSet responsive, lazy-loading), i font sono incorporati 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 pubbliche dello studio legale — zero JS lato client, scansione immediata
- SSR in streaming con Suspense per il calendario delle pratiche in tempo reale e le disponibilità
- Incremental Static Regeneration (ISR) per ampi cataloghi di servizi legali e articoli del blog — senza ricompilare
- Route Groups e Parallel Routes per layout complessi senza nuovi rendering
TypeScript rigoroso — 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 delle API, confronti errati. Un progetto tipico ha 0 errori TypeScript in CI prima ancora di qualsiasi test.
Per la gestione dello stato usiamo Zustand (leggero, senza boilerplate) o React Context per lo stato locale. Il recupero dei dati è affidato a TanStack Query (cache automatica, invalidazione intelligente, stale-while-revalidate). I moduli usano React Hook Form con validazione tramite schemi Zod — validazione sincrona e asincrona senza codice duplicato.
- 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 la validazione a runtime dei dati provenienti da API esterne
- Alias di percorso (`@/components/...`) — import puliti senza `../../..`
Test automatizzati 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 è bloccato se uno solo fallisce. Copertura minima dell'80% sulla logica di business.
- Lighthouse CI — un punteggio <90 blocca il deploy in staging
- Analizzatore automatico del bundle — avviso se il bundle cresce più del 5% rispetto a main
- Storybook per i componenti UI — documentazione visiva sempre aggiornata
Vantaggi e limiti
Vantaggi
- Lighthouse 95+ fin dal primo giorno, senza ottimizzazioni manuali.
- SSR e SSG nativi — HTML completo per Google e per i motori di IA.
- TypeScript rigoroso intercetta i bug in fase di 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.
- Frequenti breaking change tra le versioni principali — 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 della 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,5 s, Lighthouse 95+ | Il JS di idratazione cresce con l'interattività | Siti ad alto traffico e critici per la SEO |
| Scalabilità | Decine di migliaia di utenti, CDN edge | Richiede hosting Node o serverless | SaaS, portali, piattaforme legali |
| Costo tipico | Open source, hosting da circa 0 € | Funzioni serverless fatturate 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ì, 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 di IA leggono subito.
Next.js va bene per la SEO?
Sì. SSR/SSG producono HTML indicizzabile, metadati e JSON-LD vengono generati sul server e i Core Web Vitals sono verdi per progettazione — tutti segnali di ranking importanti.
Posso migrare un sito esistente su Next.js?
Sì, in modo graduale: le pagine si spostano una alla volta, mantenendo gli URL e i redirect 301 così 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.