I lettori come te aiutano a sostenere MUO. Quando effettui un acquisto utilizzando i link sul nostro sito, potremmo guadagnare una commissione di affiliazione. Per saperne di più.

Next.js 13 ha introdotto un nuovo sistema di routing utilizzando la directory dell'app. Next.js 12 ha già fornito un modo semplice per gestire i percorsi tramite percorsi basati su file. L'aggiunta di un componente alla cartella delle pagine lo renderebbe automaticamente un percorso. In questa nuova versione, il router basato su file system viene fornito con una configurazione integrata per layout, modelli di instradamento nidificato, un'interfaccia utente di caricamento, gestione degli errori e supporto per componenti server e streaming.

Questo articolo spiega queste nuove funzionalità e perché sono importanti.

Iniziare con Next.js 13

Crea il tuo progetto Next.js 13 eseguendo il seguente comando nel terminale.

npx creare-Prossimo-app@latest successivo13 --experimental-app

Questo dovrebbe creare una nuova cartella chiamata next13 con la nuova directory dell'app.

instagram viewer

Comprensione della nuova directory delle app

Next.js 12 utilizzava il file pagine directory per il routing, ma viene sostituita con la applicazione/ directory in Next.js 13. IL pagine/ directory funziona ancora in Next 13 per consentire l'adozione incrementale. Devi solo assicurarti di non creare file nelle due directory per lo stesso percorso in quanto riceverai un errore.

Ecco la struttura attuale della directory dell'app.

Nella directory dell'app, utilizzi le cartelle per definire i percorsi e i file all'interno di queste cartelle vengono utilizzati per definire l'interfaccia utente. Ci sono anche file speciali come:

  • pagina.tsx - Il file utilizzato per creare l'interfaccia utente per un determinato percorso.
  • layout.tsx - Contiene la definizione del layout del percorso ed è condivisibile su più pagine. Sono perfetti per i menu di navigazione e le barre laterali. Durante la navigazione, i layout conservano lo stato e non vengono nuovamente visualizzati. Ciò significa che quando navighi tra le pagine che condividono un layout, lo stato rimane lo stesso. Una cosa da notare è che deve esserci un layout superiore (il layout principale) contenente tutti i tag HTML e body condivisi nell'intera applicazione.
  • modello.tsx - I modelli sono come i layout, tuttavia non conservano lo stato e vengono ri-renderizzati ogni volta che vengono utilizzati per creare una pagina. I modelli sono perfetti per le situazioni in cui è necessario che un determinato codice venga eseguito ogni volta che il componente viene montato, ad esempio, entrare e uscire dalle animazioni.
  • errore.tsx - Questo file viene utilizzato per gestire gli errori nell'applicazione. Avvolge una rotta con la classe limite di errore React in modo tale che quando si verifica un errore in quella rotta o nei suoi figli, tenta di ripristinarla visualizzando una pagina di errore di facile utilizzo.
  • caricamento.tsx - L'interfaccia utente di caricamento viene caricata istantaneamente dal server mentre l'interfaccia utente del percorso viene caricata in background. L'interfaccia utente di caricamento può essere uno spinner o uno scheletro. Una volta caricato, il contenuto del percorso sostituisce l'interfaccia utente di caricamento.
  • non-trovato.tsx - Il file non trovato viene visualizzato quando Next.js incontra a Errore 404 per quella pagina. In Next.js 12, dovresti creare e configurare manualmente una pagina 404.
  • testa.tsx - Questo file specifica il tag head per il segmento di percorso in cui è definito.

Come creare un percorso in Next.js 13

Come accennato in precedenza, i percorsi vengono creati utilizzando le cartelle nel file applicazione/ directory. All'interno di questa cartella, devi creare un file chiamato pagina.tsx che definisce l'interfaccia utente di quel percorso specifico.

Ad esempio, per creare un percorso con il percorso /products, dovrai creare un file app/prodotti/pagina.tsx file.

Per percorsi nidificati come /products/sale, nidificare le cartelle l'una dentro l'altra in modo tale che la struttura delle cartelle assomigli app/prodotti/vendita/pagina.tsx.

Oltre a un nuovo modo di instradare, altre caratteristiche interessanti supportate dalla directory dell'app sono i componenti del server e lo streaming.

Utilizzo dei componenti del server nella directory delle app

La directory dell'app utilizza i componenti del server per impostazione predefinita. Questo approccio riduce la quantità di JavaScript inviato al browser mentre il componente viene visualizzato sul server. Questo migliora le prestazioni.

Vedi questo articolo su diversi metodi di rendering in Next.js per una spiegazione più approfondita.

Un componente server significa che puoi accedere in modo sicuro ai segreti dell'ambiente senza che vengano esposti sul lato client. Ad esempio, puoi usare processo.env.

Puoi anche interagire direttamente con il backend. Non c'è bisogno di usare getServerSideProps O getStaticProps poiché puoi utilizzare async/await nel componente server per recuperare i dati.

Considera questa funzione asincrona che recupera i dati da un'API.

asincronofunzionegetData() {
Tentativo{
cost ris = attendere andare a prendere(' https://api.example.com/...');
ritorno res.json();
 } presa(errore) {
gettarenuovoErrore("Impossibile recuperare i dati")
 }
}

Puoi chiamarlo direttamente su una pagina come segue:

esportarepredefinitoasincronofunzionePagina() {
cost dati = attendere getDati();
ritorno<div>div>;
}

I componenti del server sono ottimi per il rendering di contenuti non interattivi. Se hai bisogno di usa i ganci React, listener di eventi o API solo browser, utilizzano un componente client aggiungendo la direttiva "use client" nella parte superiore del componente prima di qualsiasi importazione.

Componenti di streaming incrementale nella directory delle app

Lo streaming si riferisce all'invio progressivo di parti dell'interfaccia utente al client fino al rendering di tutti i componenti. Ciò consente all'utente di visualizzare parte del contenuto mentre il resto viene renderizzato. Per offrire agli utenti un'esperienza migliore, esegui il rendering di un componente di caricamento come uno spinner finché il server non completa il rendering del contenuto. Puoi farlo usando in due modi:

  • Creazione di un caricamento.tsx file che verrà reso per l'intero segmento del percorso. 
esportarepredefinitofunzioneCaricamento() {
ritorno<P>Caricamento...P>
}
  • Avvolgere i singoli componenti con il limite di React Suspense e specificare un'interfaccia utente di fallback. 
importare {Suspense} da"reagire";
importare { Prodotti } da"./Componenti";
esportarepredefinitofunzioneVendita() {
ritorno (
<sezione>
Prodotti...
}>
<Prodotti />
Suspense>
sezione>
 );
}

Prima che venga eseguito il rendering del componente Prodotti, un utente vedrà "Prodotti...". Questo è meglio di uno schermo vuoto in termini di esperienza utente.

Aggiornamento a Next.js 13

La nuova directory dell'app è sicuramente un miglioramento rispetto alla directory delle pagine precedenti. Include file speciali come layout, head, template, error, not-found e loading che gestiscono diversi stati durante il rendering di un percorso senza bisogno di una configurazione manuale.

Inoltre, la directory dell'app supporta anche lo streaming e i componenti del server che portano a prestazioni migliori. Sebbene queste funzionalità siano ottime sia per gli utenti che per gli sviluppatori, la maggior parte di esse è attualmente in versione beta.

Tuttavia, puoi comunque eseguire l'upgrade a Next.js 13 poiché la directory della pagina funziona ancora, quindi iniziare a utilizzare la directory dell'app al tuo ritmo.