Sommario[Nascondere][Spettacolo]
Quando si seleziona una libreria o un framework software, di solito viene presa in considerazione l'esperienza dello sviluppatore.
Quando parlo di "esperienza dello sviluppatore", mi riferisco al modo in cui gli sviluppatori svolgono effettivamente il lavoro. Gli sviluppatori scelgono librerie o framework piacevoli da usare.
Questo è uno dei motivi principali per cui ora abbiamo le librerie e i framework più popolari. In quanto sviluppatori, non dobbiamo ricominciare da zero quando sono disponibili strumenti esistenti creati per assisterci nelle nostre attività.
I framework sono pezzi di software creati e utilizzati dagli sviluppatori per costruire applicazioni e NextJS è uno di questi.
In questo post, esamineremo Nextjs, le sue caratteristiche principali e come possiamo usarlo per creare un'applicazione. Entriamo subito.
Cos'è Next.js?
Next.js è un framework JavaScript per costruire rapidamente e facilmente pagine Web statiche e applicazioni online basate su React. Ti consente di progettare fantastiche app Web per una varietà di piattaforme, inclusi Windows, Linux e Mac.
Dovresti avere familiarità con il framework Next.js se hai una familiarità minima con react e vuoi saperne di più sull'ecosistema react.
Anche se Next.js viene fornito con tutto il necessario per iniziare, puoi scegliere tra NPM e Yarn, JavaScript e TypeScript, CSS e SCSS, esportazione statica e distribuzione serverless.
Caratteristiche
- Il routing viene eseguito automaticamente: non è necessario configurare nulla perché qualsiasi URL è mappato sul filesystem, sui file nella cartella delle pagine (ovviamente hai opzioni di personalizzazione).
- Componenti di un singolo file: è semplice aggiungere stili con ambito al componente utilizzando styled-jsx, che è totalmente integrato e prodotto dallo stesso team.
- Ricaricare un Hot Code – Quando Next.js rileva una modifica salvata su disco, ricarica la pagina.
- Componenti dinamici: puoi caricare dinamicamente moduli JavaScript e componenti React.
- Esportazioni statiche: Next.js ti consente di esportare un sito completamente statico dalla tua app con il comando di esportazione successivo.
- Compatibilità con l'ambiente – Next.js si integra perfettamente con gli ecosistemi JavaScript, Node e React.
- Divisione automatica dei codici: per il rendering delle pagine vengono utilizzate solo le librerie e JavaScript necessari. Invece di creare un unico file JavaScript contenente tutto il codice dell'app, Next.js divide in modo intelligente l'app in molte risorse.
Come creare un'applicazione next.js?
Installazione
Puoi utilizzare il comando node npx per installare e creare un progetto Next.js.
Questo genererà una cartella e tutti i file, le configurazioni e altri elementi necessari per eseguire un progetto Next.js.
Puoi avviare l'app una volta che è stata generata.
Pagine e instradamento
Per gestire le route con Next.js, non è necessario utilizzare un framework di routing. Il routing con Next.js è un gioco da ragazzi da configurare. Quando usi il comando create-next-app per creare una nuova app Next.js, l'app crea una cartella denominata "pagine" per impostazione predefinita.
Questa cartella "pagine" è dove mantieni i tuoi percorsi. Di conseguenza, ogni file di componenti reagisce nella sottodirectory verrà gestito come un percorso separato.
Ad esempio, se la cartella contiene quei file:
- index.js
- circa.js
- aricles.js
Questo file verrà trasformato automaticamente in tre modi:
- La pagina dell'indice localhost/index
- La pagina about localhost/about
- La pagina del blog localhost/articoli
Di seguito è mostrato un esempio di una pagina about.js. Non viene fornito nulla sulla pagina, come puoi vedere. È semplicemente un componente funzionale React standard.
Itinerari
Per creare percorsi nidificati, devi prima stabilire una sottocartella. Ad esempio: pagine/articoli. Crea il tuo componente di reazione "contact.js" all'interno di quella cartella e genererà la pagina localhost/articles/contact.
Se inserisci un file in pages/articles.js e un altro in pages/articles/index.js. Entrambi riflettono lo stesso percorso localhost/blog. In questa situazione, Next.js eseguirà il rendering del file article.js. Che dire dei percorsi dinamici, in cui ogni post del blog ha il suo percorso:
- localhost/blog/primo-articolo
- localhost/blog/-secondo-articolo
Usando la notazione tra parentesi, puoi definire un percorso dinamico in Next.js. Ad esempio: pages/article/[slug].js
Collega percorsi
Ora hai completato il tuo primo percorso. Immagino che tu stia chiedendo come collegare le pagine a quei percorsi. Avrai bisogno di "next/link" per farlo.
Ecco un esempio di home page che include un collegamento alla pagina Informazioni:
Se desideri modificare lo stile del collegamento, utilizza la seguente sintassi:
Reindirizzare le rotte
Cosa succede se devi forzare un reindirizzamento a una determinata pagina? Ad esempio, quando viene premuto un pulsante? Puoi farlo usando 'router.push':
Gestione SEO
Le pagine nelle applicazioni web richiedono meta elementi (head) oltre ai dati all'interno del corpo HTML. Ciò richiederà l'installazione di un requisito aggiuntivo denominato React Helmet in un'applicazione React.
Possiamo utilizzare il componente Head da next/head in Next per aggiungere facilmente metadati alle nostre pagine Web che verranno visualizzati nei risultati di ricerca e incorporati:
Componenti
Avrai spesso bisogno di sviluppare componenti o un file di layout. Ad esempio, un componente che esegue il rendering della barra di navigazione. Finora abbiamo appena utilizzato la cartella delle pagine. Cosa succede se il tuo componente non è pensato per essere una pagina di percorso?
Non vuoi che l'utente acceda a una pagina come localhost/navbar. Se inserisci il componente Navbar.js nella cartella delle pagine, questo è ciò che accadrà. Cosa dovresti fare nella situazione?
Archivia semplicemente tutti i tuoi componenti "non una pagina" in una cartella separata. La maggior parte dei progetti Next.js utilizza il moniker "components" e questa cartella viene generata nella cartella principale del progetto.
Componente capo
Il caricamento della pagina iniziale viene visualizzato da Next.js sul lato server. Lo fa modificando l'HTML della tua pagina. La sezione dell'intestazione è inclusa.
Il componente Next.js Head viene utilizzato per fornire tag di sezione di intestazione come title e meta. Il componente Head viene utilizzato in questo esempio di un componente Layout.
Crea 404 pagina non trovata
È possibile creare la propria pagina di errore 404. Potresti voler personalizzare il messaggio o aggiungere il tuo design di pagina. Nella cartella delle pagine, crea il file 404.js.
Quando si verifica un errore 404, Next.js reindirizzerà automaticamente a questa pagina. Ecco un esempio di una pagina 404 personalizzata:
Recupero dati dal lato server
Invece di scaricare i dati sul lato client, Next.js consente di condurre una popolazione di dati iniziale, il che implica l'invio della pagina con i dati già popolati dal server.
Hai due scelte per implementare il recupero dei dati lato server:
- I dati dovrebbero essere recuperati su ogni richiesta.
- Ottieni i dati una sola volta durante il processo di costruzione (sito statico)
Recupera i dati su ogni richiesta
Il metodo getServerSideProps viene utilizzato per eseguire il rendering lato server di ogni richiesta. Questa funzione può essere inclusa alla fine del file del componente. Next.js popolerà automaticamente gli oggetti di scena del componente con l'oggetto getServerSideProps se tale funzione è presente nel file del componente.
Recupera i dati in fase di compilazione
Il metodo getStaticProps viene utilizzato per eseguire il rendering lato server in fase di compilazione. Questa funzione può essere inclusa alla fine del file del componente. Questo metodo esegue il codice del server e invia una richiesta GET al server, ma solo una volta al termine del nostro progetto.
Perché dovresti imparare Next.js?
Uno dei motivi è perché Next.js è basato su React, un toolkit di sviluppo front-end per creazione di interfacce utente che sono la mia scelta preferita per la progettazione di app web.
Ma non sarebbe abbastanza se Next.js non fosse bravo in quello che faceva... giusto?
Quindi, cosa fa esattamente?
Dobbiamo prima definire alcuni concetti per comprenderlo. Next.js ha guadagnato popolarità perché ha risolto un problema che molti sviluppatori Web avevano con le app Web lato client (nel browser). Queste applicazioni a pagina singola (SPA) hanno avuto un'esperienza migliore poiché non avevano bisogno che l'utente ricaricasse la pagina e consentivano una maggiore interattività.
Tuttavia, poiché la maggior parte del materiale in un'app come questa diventa visibile solo quando viene eseguita nel browser, i web crawler hanno difficoltà a comprendere il contenuto testuale di tale app.
Di conseguenza, nonostante la loro popolarità, molte SPA sono rimaste in gran parte anonime rispetto ai grandi motori di ricerca come Google. Next.js ora include un meccanismo integrato più robusto per il rendering lato server (SSR) dei componenti React.
Next.js consente agli sviluppatori di costruire codice JavaScript sul server durante il processo di compilazione e di fornire all'utente HTML di base e indicizzabile.
Vantaggi
- Ottimo per l'esperienza dell'utente
- Ottimo per SEO
- Costruisci un sito web statico super veloce che si comporti come un dinamico
- Flessibilità nella creazione di UI e UX.
- Molti vantaggi di sviluppo
- Ottimo supporto della comunità
Svantaggi
- I siti Web o le applicazioni hanno una certa quantità di tempo per essere costruiti o sviluppati.
- Per alcune attività, Next.js è inadeguato. Gli sviluppatori dovrebbero essere in grado di costruire percorsi dinamici utilizzando gli strumenti Node.js.
Conclusione
Come puoi vedere, Next.js semplifica lo sviluppo dell'app React e ti consente di concentrarti su ciò che conta di più: la logica dell'app e l'interfaccia utente. Include tutto il necessario per creare app moderne, ricche di frontend e basate su API.
È anche appropriato per progetti di solo contenuto, come blog e siti Web aziendali, grazie alla sua capacità di creare pagine HTML statiche.
Con le edizioni attuali, Next.js non solo mantiene un alto livello di esperienza per gli sviluppatori, ma offre anche strumenti per aumentare le prestazioni visive e l'esperienza utente, garantendo un futuro luminoso per questo framework.
Lascia un Commento