Nel processo di sviluppo di un'applicazione web, la gestione delle pagine e la navigazione tra di esse è un aspetto cruciale. In questa serie di articoli approfondiremo i fondamenti della creazione di pagine e dell'implementazione della navigazione in formato Next.js. Questi concetti fondamentali sono essenziali per creare applicazioni web flessibili e gestibili.
Creazione e visualizzazione della prima pagina
Innanzitutto, capiamo come creare e visualizzare una semplice pagina in formato Next.js. Puoi creare pagine creando file nella pages directory del tuo progetto. Ad esempio, per creare una pagina di benvenuto, puoi creare un file denominato welcome.js all'interno della pages directory.
// pages/welcome.js
function WelcomePage() {
return <h1>Welcome to Next.js!</h1>;
}
export default WelcomePage;
Nello snippet di codice sopra, abbiamo creato una semplice pagina di benvenuto. Quando accedi al /welcome percorso nel tuo browser web, vedrai il messaggio "Benvenuto in Next.js !" visualizzato.
Di base Routing
Next.js offre un routing sistema robusto e intuitivo che semplifica la navigazione tra le pagine. Routing in Next.js si basa sulla pages directory, in cui ogni file in questa directory corrisponde a un percorso specifico. Ad esempio, un file denominato about.js all'interno della pages directory creerà una pagina accessibile nel /about percorso.
Creazione di collegamenti e navigazione
Per creare collegamenti tra le pagine e navigare tra di loro, possiamo utilizzare il <Link> componente della next/link libreria. Di seguito è riportato un esempio di creazione di un collegamento dalla pagina di benvenuto alla pagina Chi siamo.
// pages/welcome.js
import Link from 'next/link';
function WelcomePage() {
return(
<div>
<h1>Welcome to Next.js!</h1>
<Link href="/about">Learn more about us</Link>
</div>
);
}
export default WelcomePage;
Nell'esempio sopra, quando fai clic sul collegamento "Ulteriori informazioni su di noi", verrai reindirizzato alla /about pagina.
Conclusione
In questa sezione abbiamo esplorato come creare e visualizzare pagine semplici Next.js e come implementare la navigazione tra le pagine utilizzando la pages directory e il <Link> componente. Questi sono i passaggi iniziali cruciali nella creazione di un'applicazione Next.js. Nei prossimi articoli continueremo ad esplorare altri aspetti della Next.js realizzazione di applicazioni web dinamiche e interattive.