Cos'è Next.js?

‍
‍Next.js (nextjs) è un framework per applicazioni React con rendering sul server. È stato sviluppato da Zeit, una società che ha anche sviluppato un framework simile chiamato JAMstack, di cui potete leggere di più qui. In questo caso, si tratta di un potente framework che è stato progettato per prendersi carico della maggior parte del lavoro di costruzione di un'applicazione React, fornendo tutta l'impalcatura di cui hai bisogno, permettendoti di costruire la tua applicazione rapidamente e facilmente.

Next.js è stato originariamente creato da Guillermo Rauch su GitHub nel 2016 e grazie alla sua funzionalità, grandi aziende come Netflix, Starbucks, Uber, GitHub e Ticketmaster hanno utilizzato Next.js per lo sviluppo dei loro siti web. Attualmente è di proprietà e mantenuto dalla società Vercel.

Next.js è un framework leggero che non richiede molte configurazioni. Include funzioni come Babel e webpack, che semplificano la creazione di applicazioni React. Next.js include anche una funzione di hot reloading, che consente di aggiornare il codice della web app senza dover riavviare il server.

Quindi Next.js è un framework popolare per la costruzione di applicazioni React renderizzate lato server ma un aspetto chiave della sua organizzazione è la directory pages, dove ogni file diventa un percorso dell'applicazione.

Next.js offre anche funzioni per lo styling dei componenti con i CSS, ospitati in una directory app separata.

L'ampia documentazione e i canali attivi della comunità rendono facile per gli sviluppatori iniziare e acquisire esperienza con Next.js.

Come funziona Next.js?

Next.js funziona prendendo il contenuto delle tue pagine dal tuo server Node.js. Questo significa che è molto facile creare un server Node.js e far lavorare l'applicazione con le pagine e qualsiasi dato associato ad esse.

Allo stesso tempo Next.js usa React per visualizzare le pagine che vengono restituite dal server. Prende quindi lo stesso contenuto che viene restituito dal server Node.js, e poi, con l'aiuto di Webpack, lo compila in pagine HTML statiche che vengono poi servite al client. Questo processo rende molto facile creare e mantenere la tua applicazione.

Puoi effettivamente installarlo usando NPM, o Yarn. In alternativa, puoi scaricare il codice dal sito web e installarlo manualmente.

Yarn è uno strumento a riga di comando che ti permette di gestire i pacchetti installati sul tuo computer. Ci sono molti modi diversi per installare Yarn ma il più semplice è usare questo comando sul tuo terminale.

$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -

$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

$ sudo apt-get update

$ sudo apt-get install yarn

Una volta fatto questo sarai in grado di eseguire Yarn dal terminale e installare tutti i pacchetti che vuoi. Il comando sopra è per i sistemi Linux oppure se hai Windows installa Git per emulare BASH.

Una volta che Yarn è installato, puoi installare Next.js usando questo comando:

$ yarn global add next

Se non vuoi usare Yarn, puoi utilizzare NPM:

$ npm install -g next

Una volta fatto questo sei in grado di eseguire il comando Next.js dal terminale e creare la tua applicazione.

Per creare una nuova applicazione è necessario eseguire questo comando:

$ next init my-app

Questo creerà una cartella chiamata my-app e installerà tutte le dipendenze di cui ha bisogno per funzionare, incluse le librerie React e React DOM, e la libreria di test Jest.

Una volta che questo comando è stato completato è possibile accedere all'applicazione utilizzando questo comando:

$ cd my-app

$ yarn start

Questo avvierà l'app su http://localhost:3000 e ti permetterà di vederla.

Leggi: "10 motivi perché Linux è meglio di Windows"

Esempio Next.js

Supponiamo che vogliamo creare una pagina web con Next.js che mostri una lista di post dal nostro blog. Iniziamo creando una nuova applicazione Next.js usando il comando create-next-app:

npx create-next-app my-blog

Dopodiché creiamo un file chiamato index.js nella cartella pages della nostra applicazione, che rappresenterà la homepage del nostro blog:

import React from 'react';
function HomePage() {
 const posts = [
   { id: 1, title: 'Primo post', content: 'Contenuto del primo post' },
   { id: 2, title: 'Secondo post', content: 'Contenuto del secondo post' },
   { id: 3, title: 'Terzo post', content: 'Contenuto del terzo post' },
 ];
 return (
   <div>
     <h1>Il mio blog</h1>
     <ul>
       {posts.map(post => (
         <li key={post.id}>
           <h2>{post.title}</h2>
           <p>{post.content}</p>
         </li>
       ))}
     </ul>
   </div>
 );
}

export default HomePage;

In questo esempio abbiamo creato un componente React chiamato HomePage che rappresenta la nostra homepage. All'interno del componente abbiamo creato un array di post fittizi, che verranno mostrati nella lista. Abbiamo utilizzato il metodo map per ciclare sull'array e creare un elemento <li> per ogni post.

Infine, abbiamo esportato il componente HomePage come default, in modo che possa essere utilizzato come pagina dalla nostra applicazione Next.js.

Per visualizzare la nostra homepage, possiamo eseguire il comando npm run dev dalla radice dell'applicazione e accedere all'indirizzo http://localhost:3000 dal nostro browser.