Rilasciato · in miglioramento
Framework · Dal 2016
Next.js è un framework React per siti web e app full-stack, con routing basato sui file, rendering lato server, Server Components e ottimizzazioni integrate.
Next.js è un framework React open source creato da Vercel e pubblicato per la prima volta nel 2016. Riunisce ciò che con il solo React dovresti mettere insieme da te: routing, rendering lato server, generazione statica, recupero dei dati e strumenti di build. L'App Router, la soluzione consigliata, si basa sui React Server Components: la struttura delle cartelle nella directory app definisce gli URL, e il codice server e quello client convivono nello stesso progetto.
Next.js dà il meglio dove contano sia le prestazioni sia la visibilità sui motori di ricerca, ed è molto usato per siti aziendali, blog e documentazione, negozi online e dashboard SaaS. Ogni route può essere pre-renderizzata in fase di build o renderizzata a ogni richiesta, e le parti lente possono arrivare progressivamente in streaming. Server Actions e Route Handlers gestiscono form e API, così un'unica base di codice copre l'interfaccia e il backend che la serve. L'ottimizzazione di immagini, font e script è già inclusa.
Per iniziare, installa Node.js, crea un progetto con create-next-app e segui la documentazione ufficiale Getting Started e il corso gratuito Learn Next.js. Conoscere componenti, props e hook di React rende tutto più semplice: se React è una novità per te, parti dalle sue basi. TypeScript funziona senza configurazioni aggiuntive ed è consigliato per i nuovi progetti.
Cartelle e file speciali come page, layout, loading ed error nella directory app definiscono URL, layout annidati, stati di caricamento e schermate di errore.
I componenti vengono renderizzati sul server per impostazione predefinita e non inviano JavaScript al browser; solo le parti marcate con "use client" vengono eseguite lì.
Combina generazione statica, rendering a ogni richiesta e streaming per singola route, mantenendo i contenuti aggiornati con cache e rivalidazione.
Componenti per immagini, font e script, suddivisione automatica del codice, prefetch dei link e Turbopack per build e aggiornamenti rapidi.
Installa una versione LTS di Node.js da nodejs.org e verifica la versione nel terminale. npm è incluso; vanno bene anche pnpm, Yarn o Bun.
node --versionCrea un nuovo progetto con create-next-app. Le impostazioni consigliate configurano TypeScript, ESLint, Tailwind CSS e l'App Router.
npx create-next-app@latest my-appEntra nella cartella del progetto, avvia il server di sviluppo e apri http://localhost:3000. La pagina si aggiorna appena salvi un file.
cd my-app && npm run devNell'App Router, app/page.tsx è la home page all'indirizzo /. Il componente React esportato come default diventa la pagina; qui è un Server Component che restituisce un titolo. Quando salvi, il browser si aggiorna subito, e aggiungendo app/about/page.tsx nasce una nuova pagina /about.
app/page.tsx
export default function Page() {
return <h1>Hello, Next.js!</h1>;
}
npx create-next-app@latest my-app && cd my-app && npm run devSei capitoli che ti accompagnano dall'installazione ai concetti chiave di Next.js.
Fai domande, condividi la tua esperienza e scambia opinioni su Next.js.
Ancora nessuna discussione. Avvia la prima.
0 commenti
Accedi · Accedi per lasciare un commento.
Scrivi tu il primo commento.