Next.js je priljubljeno odprtokodno ogrodje, zgrajeno na vrhu Reacta, zasnovano za pomoč razvijalcem pri izdelavi strežniško upodobljenih aplikacij React. Ena od njegovih zmogljivih funkcij je zmožnost ustvarjanja prehodov med stranmi na strani odjemalca, ne da bi sprožili ponovno nalaganje celotne strani, zahvaljujoč vgrajeni komponenti next/link. V tem članku se bomo naučili uporabljati next/link z izdelavo majhne aplikacije Next.js.
Kaj je naslednje/povezava?
The naslednji/povezava je komponenta React, ki vam omogoča ustvarjanje povezav med stranmi v aplikaciji Next.js. Za razliko od običajne sidrne oznake HTML, naslednji/povezava ne sproži ponovnega nalaganja celotne strani, ko uporabnik klikne povezavo. Namesto tega uporablja navigacijo na strani odjemalca za nalaganje nove strani, medtem ko ohranja trenutno stanje aplikacije. To pomeni, da bo vaša aplikacija uporabnikom delovala hitreje in bolj odzivno.
funkcija java podniz
Sintaksa: Sintaksa za uporabo Povezava je preprosta. Komponento lahko uvozite iz naslednji/povezava modul:
// Import import Link from 'next/link'; // Link component New Page>
Nato lahko uporabite komponento povezave v kodi JSX, da ustvarite povezavo do druge strani. The href prop določa URL strani, na katero se želite povezati, in podrejeni element Povezava komponenta je vsebina povezave.
Ustvari aplikacijo NextJS: Odprite terminal ali ukazni poziv in zaženite naslednji ukaz
npx create-next-app next-link>
Pomaknite se do imenika svoje aplikacije/projekta:
cd next-link>
Struktura projekta:
NextJs next/link
Osnovna uporaba 'naprej/povezava': V tem primeru bomo ustvarili preprosto aplikacijo Next.js z dvema stranema: domov in približno . Bomo uporabili naslednji/povezava ustvariti povezavo med stranmi.
Ustvarite nov imenik z imenom strani v korenu vašega projekta. Tukaj boste shranili svoje strani Next.js. Ustvari novo datoteko z imenom index.js znotraj strani imenik. To bo domov stran vaše prijave. Dodajte naslednjo kodo v index.js:
Ime datoteke: index.js
Javascript
import Link from>'next/link'>;> > export>default> function> Home() {> >return> (> >> >> >>
> >{posts.map(post =>(> >>> >))}> >>> >> >);> }> |
>
>
Zaženite razvojni strežnik z ukazom:
npm run dev>
Odprite spletni brskalnik in se pomaknite do http://localhost:3000 . Moral bi videti domov stran vaše prijave s seznamom blog objave. Kliknite eno od povezav, da se pomaknete na stran posamezne objave. Moral bi videti blog post z ustreznim polž v URL-ju.
Izhod:
java naštevanja
NextJs next/link
V tem primeru smo pokazali, kako uporabljati naslednji/povezava z dinamičnim usmerjanjem. Ustvarili smo novo predlogo strani za posameznika blog objav in uporabljenih Povezava za ustvarjanje povezav do vsake posamezne strani objave. Uporabili smo tudi useRouter kavelj iz naslednji/usmerjevalnik za dostop do polž parameter iz URL-ja in prikaže ustrezen blog post.
V zaključku, naslednji/povezava je zmogljivo orodje, ki poenostavlja navigacijo v aplikacijah Next.js ter omogoča hitro in odzivno upodabljanje na strani odjemalca. Zaradi njegove preproste sintakse in enostavne uporabe je priljubljena izbira med razvijalci za ustvarjanje povezav med stranmi in dinamično usmerjanje.