Volgende.js is een populair open-sourceframework dat bovenop React is gebouwd en is ontworpen om ontwikkelaars te helpen bij het bouwen van server-gerenderde React-applicaties. Een van de krachtige functies is de mogelijkheid om overgangen aan de clientzijde tussen pagina's te creëren zonder dat de pagina volledig opnieuw hoeft te worden geladen, dankzij de ingebouwde next/link-component. In dit artikel leren we hoe we next/link kunnen gebruiken door een kleine Next.js-applicatie te bouwen.
Wat is de volgende/link?
De volgende/link is een React-component waarmee u koppelingen tussen pagina's in een Next.js-toepassing kunt maken. In tegenstelling tot een gewone HTML-ankertag, volgende/link activeert niet het opnieuw laden van de volledige pagina wanneer de gebruiker op de link klikt. In plaats daarvan gebruikt het navigatie aan de clientzijde om de nieuwe pagina te laden, terwijl de huidige status van de applicatie behouden blijft. Dit betekent dat uw applicatie sneller aanvoelt en beter reageert op gebruikers.
Syntaxis: De syntaxis voor gebruik Koppeling is eenvoudig. U kunt het onderdeel importeren uit het volgende/link module:
// Import import Link from 'next/link'; // Link component New Page>
Vervolgens kunt u de component Link in uw JSX-code gebruiken om een link naar een andere pagina te maken. De href prop specificeert de URL van de pagina waarnaar u wilt linken, en het onderliggende element van de Koppeling component is de inhoud van de link.
Maak een NextJS-applicatie: Open een terminal- of opdrachtprompt en voer de volgende opdracht uit
schrijf json naar bestand python
npx create-next-app next-link>
Navigeer naar uw app-/projectmap:
cd next-link>
Projectstructuur:
VolgendeJs volgende/link
Basisgebruik van ‘next/link’: In dit voorbeeld maken we een eenvoudige Next.js-applicatie met twee pagina's: thuis En over . We zullen gebruiken volgende/link om een link tussen de pagina's te maken.
Maak een nieuwe map met de naam Pagina's in de root van uw project. Dit is waar u uw Next.js-pagina's opslaat. Maak een nieuw bestand met de naam index.js binnen in de Pagina's map. Dit zal de thuis pagina van uw aanvraag. Voeg de volgende code toe aan index.js:
Bestandsnaam: index.js
wat is object-java
Javascript
1 miljoen in cijfers
import Link from>'next/link'>;> > export>default> function> Home() {> >return> (> >> >> >>
> >{posts.map(post =>(> >>> >))}> >>> >> >);> }> |
>
>
Voer de ontwikkelingsserver uit met de opdracht:
npm run dev>
Open uw webbrowser en navigeer naar http://localhost:3000 . Je zou de moeten zien thuis pagina van uw aanvraag met een lijst van bloggen berichten. Klik op een van de links om naar de individuele berichtpagina te gaan. Je zou de moeten zien bloggen post met de bijbehorende naaktslak in de URL.
Uitgang:
naamgeving volgens Java-conventies
VolgendeJs volgende/link
In dit voorbeeld hebben we gedemonstreerd hoe u dit kunt gebruiken volgende/link met dynamische routing. We hebben een nieuw paginasjabloon voor individuen gemaakt bloggen berichten en gebruikt Koppeling om links naar elke individuele berichtpagina te maken. Wij hebben ook gebruik gemaakt van de gebruikRouter haak van volgende/router om toegang te krijgen tot de naaktslak parameter uit de URL en geef de bijbehorende weer bloggen na.
Ten slotte, volgende/link is een krachtige tool die de navigatie in Next.js-applicaties vereenvoudigt, waardoor snelle en responsieve weergave aan de clientzijde mogelijk wordt. De eenvoudige syntaxis en het gebruiksgemak maken het een populaire keuze onder ontwikkelaars voor het maken van koppelingen tussen pagina's en dynamische routering.