Cos'è Next.js? Una guida in linguaggio semplice per chi costruisce app

Next.js è un framework per costruire siti web e app web con React. React ti dà i mattoncini di un'interfaccia (pulsanti, moduli, liste). Next.js aggiunge il resto del sito intorno a essi: pagine e URL, il rendering delle pagine sul server così arrivano già pronte da leggere, il caricamento dei dati e l'esecuzione del codice di backend nello stesso progetto. È open source, sviluppato dalla società Vercel, ed è uno dei modi più diffusi per costruire siti React.

Perché Next.js conta quando costruisci con l'AI

Quando descrivi un'app a un app builder AI, questo deve scegliere una base tecnica. La scelta influisce su aspetti che ti interessano più avanti:

• Visibilità nei motori di ricerca. Un sito pubblico che deve posizionarsi su Google beneficia dell'invio di HTML reale, cosa che Next.js fa bene.
• Dove vive il backend. Next.js permette che pagine frontend e codice server (come «salva questo modulo» o «chiama l'API di pagamento») vivano in un unico progetto.
• Hosting. Un'app Next.js con funzioni server ha bisogno di un server su cui girare, mentre un'app Vite semplice può essere servita come file statici.

Mythex avvia i nuovi progetti di default con Vite + React + TypeScript + Tailwind, e usa Next.js quando lo chiedi: basta «Usa Next.js» nel primo prompt (come viene scelta la tecnologia). Quindi conviene sapere quando vale la pena chiederlo.

Un esempio quotidiano

Se React è una scatola di mattoncini Lego di alta qualità, Next.js è un set Lego con le istruzioni, la base e i pezzi per porte e impianti già inclusi.

Potresti costruire la stessa casa con mattoncini sciolti, ma dovresti decidere da solo come collegare le stanze, dove mettere la porta d'ingresso e come far arrivare l'acqua. Next.js prende quelle decisioni per te in modo standard, quindi ogni progetto Next.js ha una struttura simile e un nuovo sviluppatore (o un'AI) riesce a orientarsi in fretta.

Cosa aggiunge Next.js a React

Next.js ha due modi di organizzare le pagine. Il App Router (la cartella app/) è il più recente e supporta i Server Components. Il Pages Router (la cartella pages/) è l'originale ed è ancora supportato. I nuovi progetti usano in genere l'App Router. Se il codice del tuo app builder AI o un tutorial ti sembra poco familiare, spesso è per questo motivo.

Esempio pratico: un elenco pubblico di bar della tua città

Immagina un sito che elenca i bar della tua città, con una pagina per ogni bar, che vuoi far comparire nei risultati di ricerca.

Una pagina Next.js per un singolo bar potrebbe apparire più o meno così:

// app/cafes/[slug]/page.tsx  →  /cafes/blue-door, /cafes/hilltop ...
export default async function CafePage({ params }) {
  const { slug } = await params;
  const cafe = await db.cafe.findUnique({ where: { slug } });
  return (
    <main>
      <h1>{cafe.name}</h1>
      <p>{cafe.address}</p>
    </main>
  );
}

Cosa succede quando qualcuno (o Google) visita /cafes/blue-door:

1. Next.js associa l'URL a quel file. La cartella [slug] significa «qualsiasi bar».
2. Il componente gira sul server, legge il bar dal database e costruisce l'HTML.
3. Il browser riceve una pagina completa con nome e indirizzo del bar già presenti, senza attendere che JavaScript recuperi i dati.

Con un'app React semplice lato client, il browser riceverebbe prima una pagina quasi vuota, poi scaricherebbe JavaScript, poi recupererebbe il bar e infine lo mostrerebbe. I motori di ricerca spesso riescono a gestirlo, ma una pagina già completa è più affidabile. Vedi SEO per siti costruiti con l'AI.

Confronta con una dashboard riservata allo staff dietro un login: i motori di ricerca non la vedono comunque, quindi il rendering lato server porta meno benefici, e un'app Vite più semplice è spesso la scelta migliore.

Termini chiave

Errori comuni e idee sbagliate

• «Next.js sostituisce React». No. Usa React. I tuoi componenti sono ancora componenti React.
• «Next.js è sempre la scelta migliore». È più potente, ma anche più complesso da capire. Il rendering lato server, la cache e la differenza tra codice server e client sono fonti comuni di bug difficili da capire. Per un'app che sta per lo più dietro un login, un'app React semplice è spesso più facile.
• «Next.js gira solo su Vercel». È open source e può girare su qualsiasi server Node.js o in un container Docker. È possibile un'esportazione completamente statica se non usi funzioni server.
• «Usare Next.js garantisce una buona SEO». Rende più facili le pagine leggibili. Il posizionamento dipende ancora da titoli, contenuti, velocità e link.
• «Il codice server in Next.js è automaticamente privato». Il codice destinato al client finisce nel browser. I segreti devono restare nel codice solo server e nelle variabili d'ambiente.

Cosa chiedere al tuo app builder AI

• «Usa Next.js con l'App Router», nel primo prompt, se lo vuoi.
• «Quali pagine vengono renderizzate sul server, quali sono statiche e quali girano nel browser, e perché?»
• «Rendi le pagine pubbliche di marketing e di elenco renderizzate sul server o statiche, con titoli e descrizioni corretti.»
• «Tieni le chiavi API nel codice solo server e nelle variabili d'ambiente. Mostrami dove viene letta ciascuna.»
• «Questa app ha bisogno di Next.js, o un'app Vite + React sarebbe più semplice per ciò che stiamo costruendo?»

Next.js in Mythex

Mythex usa di default Vite + React + TypeScript + Tailwind e passa a Next.js quando lo chiedi nel prompt; nominarlo subito fa risparmiare crediti rispetto a cambiarlo in seguito. Vedi l'app nell'anteprima dal vivo, e Pubblica la rende disponibile su un URL attivo senza che tu debba configurare l'hosting. La documentazione di Mythex segnala che le single-page app renderizzate lato client hanno una SEO più debole rispetto all'HTML renderizzato sul server o statico, quindi per un sito di marketing in cui conta la ricerca vale la pena dirlo subito (SEO per la tua app).

Domande