Next.js è un popolare framework open source basato su React, progettato per aiutare gli sviluppatori a creare applicazioni React renderizzate su server. Una delle sue potenti funzionalità è la capacità di creare transizioni lato client tra le pagine senza attivare un ricaricamento completo della pagina, grazie al componente successivo/collegamento integrato. In questo articolo impareremo come utilizzare next/link creando una piccola applicazione Next.js.
Qual è il prossimo collegamento?
IL successivo/collegamento è un componente React che ti consente di creare collegamenti tra le pagine in un'applicazione Next.js. A differenza di un normale tag di ancoraggio HTML, successivo/collegamento non attiva il ricaricamento dell'intera pagina quando l'utente fa clic sul collegamento. Utilizza invece la navigazione lato client per caricare la nuova pagina preservando lo stato corrente dell'applicazione. Ciò significa che la tua applicazione sembrerà più veloce e più reattiva per gli utenti.
Sintassi: La sintassi per l'utilizzo Collegamento è semplice. È possibile importare il componente dal file successivo/collegamento modulo:
// Import import Link from 'next/link'; // Link component New Page>
Quindi, puoi utilizzare il componente Collegamento nel codice JSX per creare un collegamento a un'altra pagina. IL href prop specifica l'URL della pagina a cui desideri collegarti e l'elemento figlio di Collegamento componente è il contenuto del collegamento.
Crea l'applicazione NextJS: Apri un terminale o un prompt dei comandi ed esegui il comando seguente
npx create-next-app next-link>
Passa alla directory dell'app/progetto:
cd next-link>
Struttura del progetto:
perno del server SQL
NextJs prossimo/link
Utilizzo di base di 'successivo/collegamento': In questo esempio, creeremo una semplice applicazione Next.js con due pagine: casa E Di . Noi useremo successivo/collegamento per creare un collegamento tra le pagine.
Crea una nuova directory chiamata pagine nella radice del tuo progetto. Qui è dove memorizzerai le tue pagine Next.js. Crea un nuovo file chiamato indice.js dentro il pagine directory. Questo sarà il casa pagina della tua candidatura. Aggiungi il seguente codice a indice.js:
cos'è Maven
Nome file: indice.js
Javascript
import Link from>'next/link'>;> > export>default> function> Home() {> >return> (> >> >> >>
> >{posts.map(post =>(> >>> >))}> >>> >> >);> }> |
>
>
Esegui il server di sviluppo utilizzando il comando:
npm run dev>
Apri il tuo browser web e vai a http://localhost:3000 . Dovresti vedere il casa pagina della tua domanda con un elenco di blog post. Fare clic su uno dei collegamenti per accedere alla pagina del singolo post. Dovresti vedere il blog post con il corrispondente lumaca nell'URL.
l'attrice indiana rani mukerji
Produzione:
NextJs prossimo/link
In questo esempio, abbiamo dimostrato come utilizzare successivo/collegamento con routing dinamico. Abbiamo creato un nuovo modello di pagina per i singoli utenti blog posti e usati Collegamento per creare collegamenti a ogni singola pagina di post. Abbiamo utilizzato anche il useRouter gancio da successivo/router per accedere al lumaca parametro dall'URL e visualizzare il corrispondente blog inviare.
Insomma, successivo/collegamento è un potente strumento che semplifica la navigazione nelle applicazioni Next.js, consentendo un rendering lato client veloce e reattivo. La sua sintassi semplice e la facilità d'uso lo rendono una scelta popolare tra gli sviluppatori per la creazione di collegamenti tra pagine e routing dinamico.