Le basi di NextJs: Il routing e i componenti speciali
Con routing in NextJs, intendiamo la struttura delle cartelle interna del sito. Nella cartella App, il Routing viene gestito da NextJs e ogni directory rappresenta un percorso diverso, il contenuto del percorso viene scritto in un file speciale chiamato ‘page.js’. Per comprenderci meglio ecco un semplice esempio:
Prendendo il caso in cui, questa sia la struttura di un sito web chiamato infoBlog (il nome è stato scelto a caso, nel caso in cui esista davvero un sito chiamato infoBlog, non mi sto riferendo al sito reale), prendendo l'esempio abbiamo tre percorsi possibili (che poi sono anche i vari url per accedere ai vari percorsi del sito):
'frameHelper.com' come Homepage (viene contattato come percorso puro la directory root), 'frameHelper.com\contatti' come pagina per i contatti e 'frameHelper.com\setting' come pagina delle impostazioni. Come si può notare per accedere a un percorso non dobbiamo inserire il seguente url: 'frameHelper.com\contatti\page.js', perchè tramite la cartella app i percorsi sono gestiti in automatico, quindi il file 'page.js' non si deve inserire nel percorso.'frameHelper.com' come Homepage (viene contattato come percorso puro la directory root), 'frameHelper.com\contatti' come pagina per i contatti e 'frameHelper.com\setting' come pagina delle impostazioni. Come si può notare per accedere a un percorso non dobbiamo inserire il seguente url: 'frameHelper.com\contatti\page.js', perchè tramite la cartella app i percorsi sono gestiti in automatico, quindi il file 'page.js' non si deve inserire nel percorso.
In NextJs esistono diversi componenti speciali, nell'esempio sono stati utilizzati i componenti 'page.js' e 'layout.js'. Questi sono file fondamentali nell'ambito del routing, che NextJs gli gestisce e li integra in automatico. In NextJs esistono diversi componenti speciali, nell'esempio sono stati utilizzati i componenti 'page.js' e 'layout.js'. Questi sono file fondamentali nell'ambito del routing, che NextJs gli gestisce e li integra in automatico.
Passiamo ora velocemente a comprendere il funzionamento dei file speciali.
page.js: Questo file deve essere presente in ogni percorso, al suo interno conterrà la pagina stessa che verrà visualizzata. Per esempio nell’esempio fornito in precedenza, il contenuto della pagina che verrà visualizzata nei vari percorsi (app, app/contatti, app/setting) sarà definita dal file page.js
export default function Page() { return () }Questa è la Home Page
Questa è la descrizione della home page
layout.js: Nel layout andiamo a definire una parte delle pagina in comune, il layout entra in funzione nella stessa directory in cui è inserito e nelle sue sotto directory. Un fattore interessante da tener conto è che il contenuto del layout verrà caricato da NextJs una singola volta alla prima richiesta per ogni utente.
export default function Layout({children}) {
return (
{children}
)
}
Il {children} è una variabile che contiene il contenuto della pagina da visualizzare (facendola semplice contiene il contenuto restituito dal file ‘page.js’). La relazione tra il layout e il file page è il seguente:
Il file ‘layout.js’ è facoltativo nelle varie sottodirectory, ma nella directory madre ‘app’ è obbligatorio e se non lo creiamo noi lo creerà NextJs per noi. Quando lo andiamo a definire invece di definirlo Layout, dobbiamo ricordarci di chiamarlo RootLayout (il file sarà comunque layout.js). Il rootLayout circonderà ogni pagina del sito, al suo interno dobbiamo ricordarci di definire i componenti <html> e <body>, poi visto che il rootLayout verrà riutilizzato in ogni singolo percorso, non dovremo più definire il tag html e body.
export default function RootLayout({children}) { return ({children}) }
template.js: il funzionamento del template è simile al layout, la differenza sta nel fatto che quando cambiamo pagina all’interno del sito, il template viene rigenerato, rendendo il sito dinamico.
Esistono altri componenti speciali che hanno un ruolo importante in NextJs, ho deciso però di non trattarli perché semplicemente tramite page.js e layout.js si può iniziare a esplorare e fare qualche prova.