Creare un sito Web con Next.js

Next.js è un framework per React che facilita la creazione di applicazioni web moderne e performanti. Una delle sue caratteristiche principali è la possibilità di generare siti web statici (SSG, Static Site Generation). In questa guida, impareremo a creare un sito web statico con Next.js, che si carica velocemente e offre un'ottima esperienza utente grazie al rendering lato server e alla generazione statica delle pagine.

Cos'è Next.js?

Next.js è un framework costruito su React, ma aggiunge una serie di funzionalità avanzate come:

• Server-Side Rendering (SSR): il contenuto viene generato sul server e inviato al browser.
• Static Site Generation (SSG): le pagine vengono pre-renderizzate in fase di build e servite come file statici.
• API Routes: permette di creare endpoint API direttamente nel progetto.
• Routing automatico: gestisce automaticamente il routing delle pagine.

Questa guida si concentrerà sull'aspetto della Static Site Generation e su come configurare un sito web statico con Next.js.

Prerequisiti

Per seguire questa guida, dovresti avere:

• Node.js e npm installati sul tuo computer.
• Un editor di codice come Visual Studio Code.

Creare un nuovo progetto Next.js

Per creare un progetto Next.js, possiamo utilizzare il comando create-next-app che crea automaticamente un'app Next.js con tutte le dipendenze necessarie. Esegui i seguenti comandi nel terminale:

npx create-next-app my-static-site
cd my-static-site

Esso creerà una cartella chiamata my-static-site con la configurazione di base di Next.js.

Eseguire il progetto localmente

Per avviare il server di sviluppo, esegui il comando:

npm run dev

Visita http://localhost:3000 nel tuo browser per vedere la tua applicazione Next.js in esecuzione.

Struttura del progetto

La struttura del progetto Next.js è di base la seguente:

my-static-site/
├── pages/
│ ├── index.js
│ ├── _app.js
│ ├── _document.js
├── public/
├── styles/
└── package.json

• la cartella pages contiene tutte le pagine della tua applicazione.
• La cartella public contiene file statici come immagini, icone e font.
• La cartella styles contiene i fogli di stile CSS.

Creare pagine statiche

La cartella pages è il cuore del routing di Next.js. Ogni file all'interno di essa rappresenta una rotta. Ad esempio, pages/index.js rappresenta la homepage del sito. Apri pages/index.js e modifica il contenuto con qualcosa di personalizzato:

export default function Home() {
return (
<div>
<h1>Benvenuto nel mio sito statico!</h1>
<p>Questo sito è costruito con Next.js e utilizza la generazione statica delle pagine.</p>
</div>
);
}

Quando accedi nuovamente alla homepage (da http://localhost:3000) vedrai il messaggio che hai appena aggiunto.

Per aggiungere altre pagine, basta creare nuovi file dentro la cartella pages. Per esempio, se vuoi creare una pagina "About" genera il file pages/about.js e aggiungi il contenuto:

export default function About() {
return (
<div>
<h1>Chi Siamo</h1>
<p>Siamo un team di sviluppatori che ama costruire cose con React e Next.js!</p>
</div>
);
}

La pagina "About" sarà disponibile all'URL http://localhost:3000/about.

Static Site Generation (SSG)

Una delle funzionalità principali di Next.js è la generazione statica delle pagine. Questo significa che puoi generare le tue pagine in anticipo, durante la fase di build, così che quando un utente visita il sito, il contenuto è già pronto per essere servito rapidamente.

 Utilizzo di getStaticProps

Next.js offre il metodo getStaticProps, che consente di pre-renderizzare una pagina con dati dinamici, generando una versione statica della pagina durante la fase di build. Immagina di voler recuperare una lista di articoli da un'API esterna. Ecco come puoi farlo.

Modifica il file pages/index.js in questo modo:

export default function Home({ articles }) {
return (
<div>
<h1>Benvenuto nel mio sito statico!</h1>
<p>Qui ci sono alcuni articoli che puoi leggere:</p>
<ul>
{articles.map(article => (
<li key={article.id}>
<h2>{article.title}</h2>
<p>{article.body}</p>
</li>
))}
</ul>
</div>
);
}
export async function getStaticProps() {
const res = await fetch('https://jsonplaceholder.typicode.com/posts');
const articles = await res.json();
return {
props: { articles },
};
}

In questo esempio, la funzione getStaticProps viene eseguita durante la fase di build e recupera i dati da un'API esterna (in questo caso, stiamo usando l’API jsonplaceholder). I dati vengono passati alla pagina come props e vengono usati per generare il contenuto statico.

Generazione statica durante la build

Quando esegui il comando npm run build Next.js costruirà le pagine statiche utilizzando i dati recuperati tramite getStaticProps. In questo caso, la pagina principale (index.js) verrà generata con una lista di articoli, pronta per essere servita come HTML statico.

npm run build
npm start

Visita il sito e vedrai che i dati degli articoli sono stati pre-renderizzati come parte della tua pagina statica.

Ottimizzazione e deploy

Una volta che il sito è pronto, il passo successivo è l'ottimizzazione per poi procedere con il deploy.

Ottimizzazione

Next.js ottimizza automaticamente il caricamento delle pagine, minificando JavaScript e ottimizzando le immagini. Se vuoi ottenere ulteriori ottimizzazioni puoi anche utilizzare la funzionalità di impostazioni di prefetching di Next.js o implementare lazy loading per le immagini.

Deploy su Vercel

Vercel è un servizio creato dai fondatori di Next.js ed è il modo migliore per fare il deploy di un’app Next.js. Per deployare il tuo sito su Vercel, basta seguire questi passaggi:

• crea un account su Vercel.
• Collega il tuo progetto al repository Git (GitHub, GitLab, Bitbucket..).
• Una volta configurato il repository clicca su "Deploy" in Vercel e il tuo sito sarà online in pochi minuti!

Vercel si occuperà automaticamente della generazione delle pagine statiche durante il processo di build e le servirà direttamente ai tuoi utenti.

Conclusione

In questa guida, abbiamo imparato come creare un sito web statico con Next.js utilizzando la generazione statica delle pagine (SSG). Next.js semplifica il processo di creazione di applicazioni web performanti, garantendo tempi di caricamento rapidi grazie alla pre-renderizzazione delle pagine. Abbiamo esplorato la creazione di pagine, l'uso di getStaticProps per caricare dinamicamente i dati e il processo di deploy su Vercel.

Next.js è una scelta eccellente per creare siti web moderni e ottimizzati, con un flusso di lavoro che semplifica la gestione delle pagine statiche e dinamiche.