Il team di Vercel ha scelto un approccio semplice al routing. Ha deciso di utilizzare le cartelle come rotte. Questo significa che più cartelle aggiungi alla tua cartella app, più rotte otterrai. Inoltre, se crei una nuova cartella all'interno di un'altra cartella (rotta), otterrai rotte annidate. Per comprendere meglio questi concetti, ti consigliamo di osservare l'immagine qui sotto.

Abbiamo chiarito la struttura delle cartelle, ma ora analizziamo i file presenti all'interno di queste cartelle. Next.js supporta due tipi distinti di file: page.tsx e layout.tsx. La differenza risiede nei loro ruoli:

• layout.tsx è il file responsabile dell'incapsulamento degli elementi UI speciali condivisi tra più pagine;
• Al contrario, page.tsx si occupa dell'interfaccia utente specifica per la rotta corrente, adattandosi dinamicamente ai cambiamenti dell'URL. Rappresenta la visualizzazione associata ai contenuti e alle funzionalità uniche pertinenti alla rotta in questione.

Ritorno al progetto

Creiamo una rotta annidata chiamata /dashboard per la nostra applicazione. Segui i passaggi seguenti per completare questa operazione:

1. Crea una nuova cartella dashboard all'interno della cartella app;
2. All'interno della nuova cartella dashboard, crea un nuovo file chiamato page.tsx;
3. Copia e incolla il seguente contenuto nel file page.tsx.

Dopo aver completato tutti i passaggi necessari, aprire il seguente URL http://localhost:3000/dashboard. Dovresti visualizzare la pagina creata (testo Dashboard Page).

Nel prossimo capitolo continueremo il lavoro sulle pagine. Non preoccuparti, proseguiremo ancora.