Come costruire applicazioni web AI con Next.jsPattern che reggono in produzione

Le applicazioni web AI hanno una forma specifica: un utente autenticato chiede qualcosa, il server recupera il contesto, un LLM risponde in streaming, la UI renderizza i token man mano che arrivano, l'interazione viene loggata per la eval. Ognuno di questi passi trae beneficio da cose che Next.js già fa bene.

Il nostro lavoro su software AI e web gira quasi sempre su Next.js 15 App Router perché ci dà:

• Server component per fetch dei dati sicuri senza spedire secret al client.
• React Server Actions per mutazioni e chiamate strutturate — niente API layer custom per ogni bottone.
• Risposte in streaming perché l'output token-by-token dell'LLM arrivi alla UI con minima resistenza del framework.
• Runtime edge quando conta la latenza al primo token.
• Integrazione stretta con Tailwind, Shadcn UI e il resto dello stack React moderno — iterazione rapida sulle parti di un prodotto AI che gli utenti vedono.

Niente di tutto questo è impossibile su Express o Remix, ma Next.js è quello che elimina più glue code per ora di lavoro.

Un'app web AI in produzione su Next.js ha grosso modo cinque livelli:

1. UI (Server Component + Client Component). Lo shell della pagina è server-rendered per velocità e SEO; il pannello chat, editor o widget interattivo è un client component leggero che gestisce lo streaming.

2. Server Actions / Route Handler. Le chiamate strutturate — "invia messaggio," "crea conversazione," "salva feedback" — passano da Server Action. Gli endpoint di streaming free-form (/api/chat) restano come Route Handler per poter restituire ReadableStream.

3. AI service layer. Un piccolo modulo che incapsula il provider LLM, gestisce retry, costruisce prompt, applica budget di token e formatta le tool call. È il posto dove centralizzare tutto ciò che non va duplicato fra le route.

4. Retrieval e tool. Vector search, query classiche su DB, client di API di terze parti — esposti come funzioni tipizzate al layer AI. Per le app RAG, è qui che vivono embedding e ricerca ibrida.

5. Dati e logging. Postgres (Neon, Supabase o proprietario) con un'estensione vettoriale per gli embedding. Ogni richiesta logga prompt, contesto recuperato, risposta del modello e feedback utente per alimentare valutazione e debugging.

Tenere questi livelli onestamente separati è la differenza fra un prodotto che sembra veloce e una codebase che non puoi toccare senza rompere la chat.

Gli utenti tollerano un'AI che impiega sei secondi a finire — non tollerano fissare uno schermo bianco per tre secondi. Nel momento in cui il primo token compare a schermo, la latenza percepita crolla.

In Next.js, lo streaming è di solito così:

• Un Route Handler che chiama l'LLM con stream: true e restituisce il ReadableStream dell'SDK.
• Un client component che consuma quello stream con useChat (dall'AI SDK di Vercel) o un hook custom sottile.
• Gestione pulita di errori, cancellazioni e rate-limit dentro lo stream.

Se stai costruendo una chat, tratta lo streaming come obbligatorio dal giorno uno. Reimpostarlo dopo è doloroso perché sia il contratto server sia quello client devono cambiare.

La postura di sicurezza di un'app AI riguarda quasi interamente cosa il modello può vedere. Se il tuo layer di retrieval non applica access control per utente, l'LLM citerà volentieri un documento che l'utente non dovrebbe vedere.

Due pattern che usiamo:

• Retrieval vincolato alla sessione. Ogni chiamata di retrieval prende l'ID dell'utente autenticato e filtra i chunk per tag di accesso al momento della query. Nessuna query nascosta gira senza identità.
• API key con scope per i tool. Se l'AI può chiamare tool che mutano dati, quei tool si autenticano come l'utente, non come un service. Così l'audit trail riflette cosa è realmente successo.

Il middleware di Next.js 15 è un posto pulito per applicare l'auth su tutte le route AI. Non fidarti che il client passi il giusto userId — il server sa chi è l'utente.

Le app AI diventano costose rapidamente se le lasci fare. I pattern che reggono:

• Cache su hash di prompt + retrieval. Se arriva la stessa domanda con lo stesso contesto, restituisci la risposta cached. Per FAQ e prompt suggeriti, tassi di cache hit del 40–70% sono normali.
• Routing per difficoltà. Prompt brevi di classificazione possono andare a un modello più economico. Solo la generazione lunga richiede il modello premium.
• Cap sui token massimi. Generazioni fuori controllo sono la causa numero uno di bollette a sorpresa. Cap sui token di output per richiesta e budget token per utente al giorno.
• Strumenta l'uso. Traccia token e costi per conversazione, per utente, per feature. Senza questo voli alla cieca.

È engineering ordinario, ma i team lo saltano nella fretta di spedire.

La differenza più grande fra i team che riescono con l'AI e quelli che non ci riescono è avere un loop di valutazione. Ogni cambiamento rilevante a modello, prompt, retrieval o tool viene scorato su un golden set di task utente realistici. Si rilascia quando i numeri restano buoni; non si rilascia per sensazione.

Un setup di eval minimo in una codebase Next.js:

• Una directory /evals con file JSON, ognuno descrive un input, il contesto recuperato, il comportamento atteso e una rubrica di valutazione.
• Una CLI che esegue la stessa Server Action o chiamata API della produzione su ogni caso e salva i risultati.
• Una pagina admin semplice che mostra pass rate, regressioni e diff per caso fra run.

Sono due giorni di lavoro e cambiano per sempre la velocità con cui puoi spedire miglioramenti senza rompere le cose.

La maggior parte delle nostre app AI Next.js va in deploy su Vercel perché rende triviali streaming, edge e preview environment. Alcune girano sull'infrastruttura del cliente (AWS, Azure) per compliance; funziona benissimo — Next.js gira ovunque giri Node.

Indipendentemente dall'host, ciò che conta:

• Allineamento della regione. Metti provider LLM, vector database e runtime Next.js nella stessa regione. Un solo hop cross-region può raddoppiare il time-to-first-token.
• Timeout. Le chiamate AI lunghe supereranno occasionalmente i timeout di default delle function. Configurali esplicitamente; non scoprirlo in produzione.
• Osservabilità. Spedisci request log, conteggi di token e trace di errore in un sistema che il team guarda davvero. Datadog, Logtail, Sentry — uno qualsiasi. Silenti failure nelle app AI sono particolarmente difficili da debuggare dopo.

Un'applicazione web AI ben costruita su Next.js non sembra un progetto di ricerca — sembra un prodotto SaaS nitido che ha l'AI dentro. Il frontend è veloce, il retrieval è accurato, l'output del modello è fondato e ogni pezzo è osservabile.

Se stai pianificando un'app web AI, il nostro sviluppo software AI copre esattamente questo stack end-to-end, oppure contattaci per definire un prodotto specifico.