Next.js er et populært rammeverk med åpen kildekode bygget på toppen av React, designet for å hjelpe utviklere med å bygge server-renderte React-applikasjoner. En av dens kraftige funksjoner er muligheten til å lage overganger på klientsiden mellom sider uten å utløse en helsideinnlasting, takket være den innebygde neste/lenke-komponenten. I denne artikkelen vil vi lære hvordan du bruker next/link ved å bygge en liten Next.js-applikasjon.
Hva er neste/lenke?
separat streng i java
De neste/lenke er en React-komponent som lar deg lage lenker mellom sider i en Next.js-applikasjon. I motsetning til en vanlig HTML-ankertag, neste/lenke utløser ikke en helsideinnlasting når brukeren klikker på lenken. I stedet bruker den navigering på klientsiden for å laste den nye siden samtidig som den bevarer den nåværende tilstanden til applikasjonen. Dette betyr at applikasjonen din vil føles raskere og mer responsiv overfor brukerne.
Syntaks: Syntaksen for bruk Link er grei. Du kan importere komponenten fra neste/lenke modul:
// Import import Link from 'next/link'; // Link component New Page>
Deretter kan du bruke Link-komponenten i JSX-koden for å opprette en kobling til en annen side. De href prop spesifiserer URL-en til siden du vil koble til, og det underordnede elementet til Link komponent er innholdet i lenken.
Opprett NextJS-applikasjon: Åpne en terminal eller ledetekst og kjør følgende kommando
npx create-next-app next-link>
Naviger til app-/prosjektkatalogen din:
cd next-link>
Prosjektstruktur:
NextJs neste/lenke
Grunnleggende bruk av «neste/lenke»: I dette eksemplet vil vi lage en enkel Next.js-applikasjon med to sider: hjem og Om . Vi vil bruke neste/lenke for å lage en kobling mellom sidene.
Opprett en ny katalog kalt sider i roten til prosjektet ditt. Det er her du vil lagre Next.js-sidene dine. Opprett en ny fil kalt index.js inne i sider katalog. Dette vil være hjem siden i søknaden din. Legg til følgende kode til index.js:
np prikk
Filnavn: index.js
Javascript
import Link from>'next/link'>;> > export>default> function> Home() {> >return> (> >> >> >>
> >{posts.map(post =>(> >>> >))}> >>> >> >);> }> |
okse vs okse
>
>
Kjør utviklingsserveren ved å bruke kommandoen:
npm run dev>
Åpne nettleseren og naviger til http://localhost:3000 . Du bør se hjem siden i søknaden din med en liste over blogg innlegg. Klikk på en av lenkene for å navigere til den enkelte innleggssiden. Du bør se blogg innlegg med tilsvarende mordersnegle i URL-en.
Produksjon:
NextJs neste/lenke
I dette eksemplet viste vi hvordan du bruker neste/lenke med dynamisk ruting. Vi har laget en ny sidemal for enkeltpersoner blogg innlegg og brukt Link for å lage lenker til hver enkelt innleggsside. Vi brukte også bruk ruteren krok fra neste/ruter for å få tilgang til mordersnegle parameter fra URL-en og vis den tilsvarende blogg post.
For å konkludere, neste/lenke er et kraftig verktøy som forenkler navigering i Next.js-applikasjoner, og muliggjør rask og responsiv gjengivelse på klientsiden. Den enkle syntaksen og brukervennligheten gjør den til et populært valg blant utviklere for å lage koblinger mellom sider og dynamisk ruting.