Next.js yra populiari atvirojo kodo sistema, sukurta naudojant „React“, skirta padėti kūrėjams kurti serverio teikiamas „React“ programas. Viena iš galingų jo funkcijų yra galimybė sukurti kliento pusės perėjimus tarp puslapių nesuaktyvinant viso puslapio įkėlimo iš naujo dėl integruoto kito / nuorodos komponento. Šiame straipsnyje sužinosime, kaip naudoti next/link sukūrę nedidelę Next.js programą.
Kas toliau/nuoroda?
The kitas/nuoroda yra „React“ komponentas, leidžiantis kurti nuorodas tarp „Next.js“ programos puslapių. Skirtingai nuo įprastos HTML inkaro žymos, kitas/nuoroda nesuaktyvina viso puslapio įkėlimo iš naujo, kai vartotojas spusteli nuorodą. Vietoj to, jis naudoja kliento pusės naršymą, kad įkeltų naują puslapį, išsaugant dabartinę programos būseną. Tai reiškia, kad jūsų programa bus greitesnė ir geriau reaguos į naudotojus.
Sintaksė: Naudojimo sintaksė Nuoroda yra tiesmukas. Galite importuoti komponentą iš kitas/nuoroda modulis:
// Import import Link from 'next/link'; // Link component New Page>
Tada galite naudoti JSX kode esantį nuorodos komponentą, kad sukurtumėte nuorodą į kitą puslapį. The href prop nurodo puslapio, į kurį norite susieti nuorodą, URL ir antrinį elementą Nuoroda komponentas yra nuorodos turinys.
Sukurti NextJS programą: Atidarykite terminalą arba komandų eilutę ir paleiskite šią komandą
npx create-next-app next-link>
Eikite į savo programos / projekto katalogą:
žemėlapio java iteratorius
cd next-link>
Projekto struktūra:
NextJs next/link
Pagrindinis „kitas / nuoroda“ naudojimas: Šiame pavyzdyje sukursime paprastą Next.js programą su dviem puslapiais: namai ir apie . Mes naudosime kitas/nuoroda sukurti saitą tarp puslapių.
Sukurkite naują katalogą pavadinimu puslapių jūsų projekto šaknyje. Čia saugosite Next.js puslapius. Sukurkite naują failą pavadinimu index.js viduje puslapių katalogas. Tai bus namai jūsų paraiškos puslapyje. Pridėkite šį kodą prie index.js:
Failo pavadinimas: index.js
Python __name__
Javascript
import Link from>'next/link'>;> > export>default> function> Home() {> >return> (> >> >> >>
> >{posts.map(post =>(> >>> >))}> >>> >> >);> }> |
>
paveldėjimo java
>
Paleiskite kūrimo serverį naudodami komandą:
npm run dev>
Atidarykite žiniatinklio naršyklę ir eikite į http://localhost:3000 . Turėtumėte pamatyti namai paraiškos puslapyje su sąrašu dienoraštį pranešimų. Spustelėkite vieną iš nuorodų, kad pereitumėte į atskiro įrašo puslapį. Turėtumėte pamatyti dienoraštį paštu su atitinkamu šliužas URL.
Išvestis:
linkedlist ir arraylist
NextJs next/link
Šiame pavyzdyje mes parodėme, kaip naudoti kitas/nuoroda su dinaminiu maršruto parinkimu. Sukūrėme naują puslapio šabloną individualiems asmenims dienoraštį pranešimų ir naudojo Nuoroda sukurti nuorodas į kiekvieną atskirą įrašo puslapį. Mes taip pat naudojome naudokite maršrutizatorių kabliukas iš kitas / maršrutizatorius pasiekti šliužas parametrą iš URL ir parodykite atitinkamą dienoraštį paštu.
Apibendrinant, kitas/nuoroda yra galingas įrankis, kuris supaprastina naršymą Next.js programose, įgalindamas greitą ir reaguojantį atvaizdavimą kliento pusėje. Dėl paprastos sintaksės ir naudojimo paprastumo jis yra populiarus kūrėjų pasirinkimas kuriant nuorodas tarp puslapių ir dinaminiam maršruto parinkimui.