Principio fondamentale del funzionamento del framework NextJS

Nelle lezioni precedenti abbiamo installato il framework NextJS e abbiamo familiarizzato con la sua struttura di base. È il momento di iniziare il lavoro principale.

La parte principale di NextJS è il routing. Il routing funziona così: quando l'utente inserisce nella barra degli indirizzi del browser un determinato URL, il framework NextJS restituirà al browser un file specifico, corrispondente a quell'URL.

Il routing in NextJS è organizzato in modo speciale. La sua essenza consiste nel fatto che a ogni URL richiesto corrisponde una certa cartella all'interno di src/app.

Inoltre, all'interno della cartella deve esserci un file con il nome page.jsx. Proprio questo file verrà restituito al browser. E in questo file scriveremo codice in JSX, mentre al browser verrà inviato il codice HTML pronto della pagina.

Vediamo un esempio. Supponiamo di volere che all'URL /test/ venga restituito un determinato testo.

Creiamo la cartella corrispondente: src/app/test. All'interno di questa cartella creiamo il file page.jsx con il seguente contenuto:

export default function Test() {
	return <h1>hello, user!</h1>;
}

Apri il nostro URL nel browser: /test. E vedrai il testo che abbiamo scritto all'interno del file JSX.

Prova a modificare il testo e salva il file. Dopo di che, il testo cambierà automaticamente anche nel browser. Così funziona NextJS in modalità sviluppo.

Fai in modo che quando si accede all'indirizzo /about nel browser venga visualizzato un messaggio con il tuo nome e cognome.