Next.js ir populārs atvērtā pirmkoda ietvars, kas izveidots, izmantojot React, un ir paredzēts, lai palīdzētu izstrādātājiem izveidot servera renderētas React lietojumprogrammas. Viena no tās spēcīgajām funkcijām ir iespēja izveidot klienta puses pārejas starp lapām, neizraisot pilnu lapas atkārtotu ielādi, pateicoties iebūvētajam nākamās/saites komponentam. Šajā rakstā mēs uzzināsim, kā izmantot next/link, izveidojot nelielu Next.js lietojumprogrammu.
Kas ir nākamais/saite?
The nākamais/saite ir React komponents, kas ļauj izveidot saites starp lapām lietojumprogrammā Next.js. Atšķirībā no parasta HTML enkura taga, nākamais/saite neaktivizē pilnas lapas atkārtotu ielādi, kad lietotājs noklikšķina uz saites. Tā vietā tā izmanto klienta puses navigāciju, lai ielādētu jauno lapu, vienlaikus saglabājot lietojumprogrammas pašreizējo stāvokli. Tas nozīmē, ka jūsu lietojumprogramma lietotājiem šķitīs ātrāka un atsaucīgāka.
Sintakse: Sintakse lietošanai Saite ir tiešs. Jūs varat importēt komponentu no nākamais/saite modulis:
virkne char java
// Import import Link from 'next/link'; // Link component New Page>
Pēc tam varat izmantot komponentu Saite savā JSX kodā, lai izveidotu saiti uz citu lapu. The href prop norāda tās lapas URL, uz kuru vēlaties izveidot saiti, un bērna elementu Saite komponents ir saites saturs.
Izveidot NextJS lietojumprogrammu: Atveriet termināli vai komandu uzvedni un palaidiet šādu komandu
npx create-next-app next-link>
Pārejiet uz savas lietotnes/projekta direktoriju:
cd next-link>
Projekta struktūra:
NextJs next/link
Pamata “nākamā/saite” lietojums: Šajā piemērā mēs izveidosim vienkāršu Next.js lietojumprogrammu ar divām lapām: mājas un par . Mēs izmantosim nākamais/saite lai izveidotu saiti starp lapām.
Izveidojiet jaunu direktoriju ar nosaukumu lapas jūsu projekta saknē. Šeit jūs glabāsit savas Next.js lapas. Izveidojiet jaunu failu ar nosaukumu index.js iekšpusē lapas direktoriju. Šis būs mājas jūsu pieteikuma lapa. Pievienojiet tālāk norādīto kodu index.js:
Faila nosaukums: index.js
Javascript
import Link from>'next/link'>;> > export>default> function> Home() {> >return> (> >> >> >>
> >{posts.map(post =>(> >>> >))}> >>> >> >);> }> |
>
>
Palaidiet izstrādes serveri, izmantojot komandu:
npm run dev>
Atveriet savu tīmekļa pārlūkprogrammu un dodieties uz http://localhost:3000 . Jums vajadzētu redzēt mājas jūsu pieteikuma lapa ar sarakstu emuārs ziņas. Noklikšķiniet uz vienas no saitēm, lai pārietu uz atsevišķas ziņas lapu. Jums vajadzētu redzēt emuārs pastu ar atbilstošo gliemeža URL.
Izvade:
Fredijs Merkūrijs
NextJs next/link
Šajā piemērā mēs parādījām, kā to izmantot nākamais/saite ar dinamisku maršrutēšanu. Mēs izveidojām jaunu lapas veidni indivīdam emuārs amata vietas un izmantotas Saite lai izveidotu saites uz katru atsevišķu ziņas lapu. Mēs arī izmantojām izmantot maršrutētāju āķis no nākamais/maršrutētājs lai piekļūtu gliemeža parametru no URL un parādīt atbilstošo emuārs pastu.
Noslēgumā, nākamais/saite ir spēcīgs rīks, kas vienkāršo navigāciju Next.js lietojumprogrammās, nodrošinot ātru un atsaucīgu klienta puses renderēšanu. Tā vienkāršā sintakse un lietošanas vienkāršība padara to par populāru izvēli starp izstrādātājiem, lai izveidotu saites starp lapām un dinamisku maršrutēšanu.