Definito il framework React per la produzione, Next.js permette di costruire e distribuire rapidamente applicazioni su larga scala e pronte per la produzione.
Next.js è dotato di funzioni che permetteranno di portare la vostra applicazione da zero alla produzione in pochissimo tempo, offrendoti una curva di apprendimento facile, semplicità e strumenti potenti a vostra disposizione.
Next.js estende la libreria React originale di Facebook e il pacchetto create-react-app per fornire un framework React estensibile, facile da usare e a prova di produzione.
Questa guida ti accompagnerà alla scoperta di Next.js, analizzando i motivi per cui utilizzare Next.js e le diverse applicazioni che usano Next.js in produzione. Parleremo anche degli elementi di Next.js e delle sue caratteristiche. Infine, impareremo a creare la nostra prima applicazione Next.js.
Cos’è Next.js?
Next.js è un framework React che permette di creare siti web e applicazioni web statiche, ottimizzate dal punto di vista SEO ed estremamente orientate all’utente, utilizzando il framework React. Next.js è noto per offrire la migliore esperienza agli sviluppatori nella creazione di applicazioni pronte per la produzione con tutte le funzionalità necessarie.
Dispone di rendering ibrido statico e server, supporto per TypeScript, bundling intelligente, route prefetching e molto altro, senza bisogno di ulteriori configurazioni.
Perché Usare Next.js
In questa sezione vedremo perché imparare ad utilizzare Next.js. Vedremo anche quali sono le diverse applicazioni che si possono realizzare con Next.js.
Ottimizzazione delle Immagini
Next.js offre l’ottimizzazione automatica delle immagini con build istantanee. L’ottimizzazione delle immagini è una potente funzione predefinita in Next.js perché la gestione e l’ottimizzazione delle immagini richiede un gran lavoro di configurazione e l’ottimizzazione manuale delle immagini può richiedere molto tempo e incidere sulla vostra produttività.
Internazionalizzazione
Un’altra ottima funzione di Next.js è l’internazionalizzazione. È possibile creare facilmente un’applicazione aziendale e tradurla in diverse lingue. Questa funzione è un’aggiunta e rende Next.js riconosciuto a livello internazionale perché richiede una minore configurazione per l’internazionalizzazione.
Analisi di Next.js
Next.js offre una dashboard analitica che può essere configurata per mostrare dati accurati sui visitatori e approfondimenti sulle pagine. Grazie a questa funzione, è possibile creare rapidamente un cruscotto analitico e ottenere preziose informazioni sui visitatori e sulle pagine senza dover ricorrere a codice o configurazioni aggiuntive.
Zero Configurazione
La compilazione e la build di Next.js avvengono automaticamente con un aggiornamento a caldo, senza alcuna configurazione, e scala e ottimizza automaticamente le applicazioni di produzione.
La realizzazione dell’hot refresh o del refresh automatico su un’applicazione frontend tradizionale incontra molti ostacoli. Bisogna scegliere e installare le librerie giuste ed eseguire le configurazioni necessarie per farle funzionare correttamente. Next.js risolve questo problema fornendo nativamente un refresh a caldo, senza alcuna installazione e configurazione da parte dello sviluppatore.
Supporto Predefinito di SSR, SSG e CSR
Con Next.js è possibile supportare il rendering lato server, la generazione statica e il rendering lato client in un’unica applicazione. Potete decidere il tipo di applicazione che volete costruire e come intendete compilare la vostra applicazione per adattarla al meglio alllo specifico caso d’uso.
Il rendering lato server rende Next.js adatto ad applicazioni di grandi dimensioni pronte per la produzione e orientate alla SEO e la configurazione è un gioco da ragazzi.
Applicazioni che Utilizzano Next.js
Di seguito è riportato un elenco di applicazioni sviluppate con Next.js. Ricordiamo che Next.js è supportato da aziende Fortune 500, tra cui GitHub, Uber e Netflix.
Di seguito sono elencate le 5 principali applicazioni realizzate con Next.js.
TikTok
TikTok è una comunità di video online in cui gli utenti caricano video mobili di breve durata con milioni di visitatori giornalieri.
La pagina web di TikTok è sviluppata con Next.js per essere scalabile e ottimizzata per milioni di utenti attivi al giorno.
Hashnode
Hashnode è una piattaforma di blogging online gratuita rivolta agli sviluppatori ed è realizzata con Next.js. Hashnode registra milioni di utenti, sfruttando le caratteristiche di Next.js che lo rendono adatto allo sviluppo di applicazioni di piccole e grandi dimensioni.
Twitch Mobile
Twitch è una piattaforma social online che permette di chattare, interagire e godere di diversi tipi di contenuti e intrattenimento. Anche questa è sviluppata con Next.js.
Hulu
Hulu è una piattaforma di streaming simile a Netflix che permette agli utenti di guardare film e programmi televisivi online creati con Next.js.
Binance
Binance è un popolare portale di criptovalute con notizie, prezzi e la possibilità di acquistare e vendere, che registra milioni di utenti attivi e scambi di criptovalute ogni giorno. Next.js alimenta anche Binance.
Per scoprire altre aziende e siti web che utilizzano Next.js, potete visitare la pagina ufficiale di Next.js.
Cosa Si Può Creare con Next.js
Con Next.js non ci sono limiti al tipo di applicazioni che potete sviluppare. Inoltre, qualsiasi applicazione scegliate di creare con Next.js, avrà tutti i vantaggi e le caratteristiche del framework senza bisogno di ulteriori configurazioni da parte vostra.
Di seguito trovate l’elenco dei tipi di applicazioni che potete creare con Next.js:
- MVP (Minimum Viable Product)
- Siti web Jamstack
- Portali web
- Singole pagine web
- Siti web statici
- Prodotti SaaS
- Siti web di e-commerce e vendita al dettaglio
- Dashboard
- Applicazioni web complesse e impegnative
- Interfacce utente interattive
Caratteristiche di Next.js
Di seguito illustriamo le caratteristiche di Next.js e i vantaggi che otterrete utilizzando Next.js nei vostri progetti.
Routing
Il routing è una delle caratteristiche essenziali di Next.js, che utilizza un sistema di routing basato sui file delle pagine per strutturare il routing delle applicazioni. Tutti i file e tutte le cartelle create all’interno della cartella pages vengono automaticamente convertiti in percorsi.
Il sistema di routing di Next.js si divide in 3 tipi diversi e di seguito li analizzeremo uno alla volta.
Index Routing
La cartella page contiene automaticamente index.js, che diventa la route per la homepage /. Potete anche definire una pagina index.js per tutte le vostre route in qualsiasi cartella. Ad esempio, potete definire pages/profiles/index.js, che verrà automaticamente mappato alla pagina /profiles.
Prendiamo questo esempio:
- pages
- index.js
- profile
- index.js
- [user].jsLa struttura della pagina qui sopra mapperà le cartelle e i file in una struttura di URL. Ad esempio / per pages/index.js, /profile/ per pages/profile/index.js e /profile/user per pages/profile/user.js rispettivamente.
Route Annidate
Le route annidate vengono create all’interno di una parent route. Per creare una rout annidata, bisogna creare una route/cartella genitore all’interno della cartella pages e aggiungere cartelle o file al suo interno.
Date un’occhiata a questo esempio:
- pages
- index.js
- dashboard
- index.js
- user.jsNello script qui sopra, i file user.js e index.js sono annidati nella parent route dashboard, il che significa che gli URL sono accessibili solo con la route dashboard.
Route Dinamiche
Si ottiene tramite le route dinamiche. Le route dinamiche sono sempre indeterminate. Possono essere generate tramite chiamate API o assegnando un ID o uno slug all’URL.
Per creare una route dinamica in Next.js, aggiungete una parentesi quadra [id].js intorno al nome del file o della directory. Potete dare al file o alla directory un nome a piacere, ma per renderlo dinamico è necessario aggiungere sempre una parentesi quadra [].
Guardate questo esempio:
- pages
- dashboard
- [user].js
- profileLo script qui sopra rende dinamico [user].js, il che significa che la pagina del profilo deve essere accessibile con /dashboard/2/profile o /dashboard/johndoe/profile.
Nella documentazione ufficiale troverete maggiori informazioni e i diversi trucchi per creare un sistema di routing più avanzato in Next.js.
File Statici
In Next.js, i file statici o le risorse come icone, font self-hosted o immagini vengono serviti attraverso la cartella public, l’unica fonte di verità per le risorse statiche.
Secondo la documentazione di Next.js, la cartella public non deve essere rinominata. Servire le risorse statiche attraverso la cartella public è molto semplice, e dipende da come Next.js l’ha configurata.
Pre-Rendering
Una delle caratteristiche principali di Next.js è il pre-rendering, che fa sì che Next.js funzioni molto bene e molto velocemente. Next.js esegue il pre-rendering delle pagine generando in anticipo il codice HTML di ogni pagina insieme al minimo JavaScript che deve essere eseguito attraverso un processo noto come Hydration.
In Next.js esistono due forme di pre-rendering:
- Rendering lato server (SSR)
- Generazione statica (SG)
Il modo in cui i dati vengono recuperati è la differenza fondamentale tra SG e SSR. Nel caso di SG, i dati vengono recuperati al momento della creazione e riutilizzati a ogni richiesta (il che li rende più veloci perché possono essere memorizzati nella cache), mentre nel caso di SSR i dati vengono recuperati a ogni richiesta.
Importazioni Assolute
A partire da Next.js 9.4 sono state introdotte le importazioni assolute, il che significa che non dovrete più importare componenti con directory relativamente lunghe.
Ad esempio, non è necessario importare componenti come quello riportato di seguito:
import InputField from "../../../../../../components/general/forms/inputfield"Invece, potete importare i componenti in questo modo:
import InputField from "components/general/forms/inputfield";Collegamenti tra le Pagine
Next.js fornisce il componente next/link per navigare tra le pagine. La navigazione tra le pagine delle applicazioni può essere realizzata con il componente Link esportato da next/link.
Supponendo di avere queste strutture di pagine nella cartella pages e di volerle collegare tra loro, potete utilizzare il seguente script:
- pages
- index.js
- profile.js
- settings.js
- users
- index.js
- [user].jsCollegate le pagine utilizzando questo script:
import Link from "next/link";
export default function Users({users) {
return (
<div>
<Link href="/">Home</Link>
<Link href="/profile">Profile</Link>
<Link href="/settings">
<a> Settings </a>
</Link>
<Link href="/users">
<a> Settings </a>
</Link>
<Link href="/users/bob">
<a> Settings </a>
</Link>
</div>
)
}Stili
Next.js vi offre il lusso di creare e avere molti stili a seconda delle necessità dei vostri progetti. Di default, Next.js dispone di tre stili diversi: CSS globale, Moduli CSS e style-jsx.
Gli Svantaggi di Next.js
Come ogni cosa bella, anche Next.js ha i suoi svantaggi, che dovrete considerare prima di utilizzarlo per il vostro prossimo progetto. In questa sezione analizzeremo gli svantaggi di Next.js.
Costi di Sviluppo e Manutenzione
Con Next.js, la flessibilità si accompagna a costi elevati di sviluppo e manutenzione. Per apportare modifiche e mantenere l’applicazione, avrete bisogno di uno sviluppatore Next.js dedicato e di un esperto di frontend che costerà di più.
Mancanza di un Gestore di Stati Integrato
Next.js non supporta la gestione degli stati in modo immediato. Se avete bisogno di una gestione dello stato, dovrete installarla e utilizzarla come fareste con React.
Pochi Plugin
Con Next.js non avrete a disposizione molti plugin.
Come Creare un’Applicazione Next.js
In questa sezione metteremo in pratica Nuxtjs e vedremo come creare un’applicazione NuxtJS. Ma prima facciamo una panoramica di alcuni concetti essenziali per lo sviluppo di un’applicazione Nuxtjs.
Creare un’Applicazione Next.js
Creare un nuovo progetto Next.js è molto semplice. Potete creare un progetto Nuxt in diversi modi, ma l’approccio preferito e consigliato è quello della CLI.
Per creare una nuova applicazione Next.js con CLE, assicuratevi di avere installato npx (npx è fornito di default da npm 5.2.0) o npm v6.1 o yarn.
Quindi, digitate il seguente comando nella cartella in cui volete collocare il vostro progetto Next.js:
npx create-next-app
// Follow the instructions to create your first Next.js project.
cd <project-name>
npm run devSostituite <nome-progetto> con il nome effettivo del progetto. A questo punto potete iniziare a creare le pagine e i componenti necessari al vostro progetto.
Elementi di Next.js
Quando create un nuovo progetto Next.js, noterete che è dotato di diversi elementi, pagine e strutture di cartelle che possono essere difficili da comprendere per i principianti. Per questo di seguito descriveremo alcuni degli elementi di Next.js.
Struttura delle Cartelle
Dopo aver creato un nuovo progetto Next.js da una CLI, noterete un’applicazione Next.js con una struttura di cartelle molto semplice. Questa struttura di cartelle predefinita è il minimo indispensabile per far funzionare un’applicazione Next.js. Quando inizierete a costruire il progetto, avrete più cartelle e file di quelli inizialmente previsti dal framework.
Le uniche cartelle specifiche di Next.js sono le cartelle pages, public e styles. Queste non dovrebbero essere rinominate a meno che non siate pronti a modificare altre configurazioni.
Di seguito è riportata la struttura di cartelle predefinita per un nuovo progetto Next.js:
# other files and folders, .gitignore, package.json...
- pages
- api
- hello.js
- _app.js
- index.js
- public
- favicon.ico
- vercel.svg
- styles
- globals.css
- Home.module.cssPagine
Le pagine sono una delle cartelle specifiche di Next e di seguito riportiamo alcune cose da sapere sulle pagine di Next.js.
Le pagine sono componenti React e ogni file della cartella pages è una pagina web e ogni pagina web è un componente React. Ad esempio, abbiamo un componente React all’interno della cartella Pages, che si traduce nell’URL di pagina web.
// Location: /pages/index.js
// is just a basic React component
export default Index() {
return <h1>Welcome to Home</h1>
}Next.js è dotato di pagine personalizzate precostituite con prefissi di sottolineatura come _app.js e _document.js. Per inizializzare le pagine, Next.js utilizza il componente di pagina personalizzato _app.js. Questo risiede all’interno della cartella pages, mentre il componente di pagina personalizzato _document.js aumenta i tag <html> e <body> della vostra applicazione.
Il framework utilizza anche un sistema di routing basato sulle pagine, in cui ogni pagina diventa automaticamente una route in base al suo nome. Ad esempio, una pagina pages/user si troverà in /user, mentre pages/index.js in /.
Riepilogo
Next.js dovrebbe venire in mente quando si realizzano applicazioni aziendali e pronte per la produzione con React, perché è stato progettato per ridurre le difficoltà legate alla realizzazione di applicazioni di produzione grazie alle sue funzionalità, ai suoi strumenti e alla sua configurazione.
In questa guida abbiamo esplorato le diverse caratteristiche di questo framework e abbiamo elencato i motivi per cui realizzare applicazioni enterprise-ready utilizzando Next.js. Ora sapete che, anche se non avete mai provato Next.js, ci sono molti motivi per provarlo.
Fateci sapere nella sezione commenti cosa costruirete con questi nuovi superpoteri!
