Next.js on suosittu avoimen lähdekoodin kehys, joka on rakennettu Reactin päälle ja joka on suunniteltu auttamaan kehittäjiä rakentamaan palvelimella renderöityjä React-sovelluksia. Yksi sen tehokkaista ominaisuuksista on kyky luoda asiakaspuolen siirtymiä sivujen välillä käynnistämättä koko sivun uudelleenlatausta sisäänrakennetun next/link -komponentin ansiosta. Tässä artikkelissa opimme käyttämään next/linkiä rakentamalla pienen Next.js-sovelluksen.
Mikä on seuraava/linkki?
The seuraava/linkki on React-komponentti, jonka avulla voit luoda linkkejä sivujen välille Next.js-sovelluksessa. Toisin kuin tavallinen HTML-ankkuritunniste, seuraava/linkki ei käynnistä koko sivun uudelleenlatausta, kun käyttäjä napsauttaa linkkiä. Sen sijaan se käyttää asiakaspuolen navigointia uuden sivun lataamiseen säilyttäen samalla sovelluksen nykyisen tilan. Tämä tarkoittaa, että sovelluksesi tuntuu nopeammalta ja reagoivammalta käyttäjille.
Syntaksi: Syntaksi käyttöä varten Linkki on suoraviivaista. Voit tuoda komponentin osoitteesta seuraava/linkki moduuli:
// Import import Link from 'next/link'; // Link component New Page>
Sitten voit käyttää JSX-koodisi Link-komponenttia luodaksesi linkin toiselle sivulle. The href prop määrittää sen sivun URL-osoitteen, johon haluat linkittää, ja alielementin Linkki komponentti on linkin sisältö.
Luo NextJS-sovellus: Avaa pääte tai komentokehote ja suorita seuraava komento
npx create-next-app next-link>
Siirry sovellus-/projektihakemistoosi:
cd next-link>
Hankkeen rakenne:
NextJs next/link
Seuraavan/linkin peruskäyttö: Tässä esimerkissä luomme yksinkertaisen Next.js-sovelluksen, jossa on kaksi sivua: Koti ja noin . Me käytämme seuraava/linkki luodaksesi linkin sivujen välille.
Luo uusi hakemisto nimeltä sivuja projektisi juurella. Tänne tallennat Next.js-sivusi. Luo uusi tiedosto nimeltä index.js sisällä sivuja hakemistosta. Tämä tulee olemaan Koti hakemuksesi sivu. Lisää seuraava koodi index.js:
java char kokonaisluvuksi
Tiedostonimi: index.js
Javascript
import Link from>'next/link'>;> > export>default> function> Home() {> >return> (> >> >> >>
> >{posts.map(post =>(> >>> >))}> >>> >> >);> }> |
>
>
Suorita kehityspalvelin komennolla:
npm run dev>
Avaa verkkoselain ja siirry kohtaan http://localhost:3000 . Sinun pitäisi nähdä Koti hakemuksesi sivu, jossa on luettelo blogi viestit. Napsauta yhtä linkeistä navigoidaksesi yksittäisen viestin sivulle. Sinun pitäisi nähdä blogi postata vastaavan kanssa etana URL-osoitteessa.
Lähtö:
unordered_map c++
NextJs next/link
Tässä esimerkissä osoitimme, kuinka sitä käytetään seuraava/linkki dynaamisella reitityksellä. Loimme uuden sivumallin yksittäisille henkilöille blogi viestit ja käytetty Linkki luodaksesi linkit jokaiselle yksittäiselle viestisivulle. Käytimme myös käytä Routeria koukku alkaen seuraava/reititin päästäksesi käsiksi etana URL-osoitteesta ja näytä vastaava blogi lähettää.
Tiivistettynä, seuraava/linkki on tehokas työkalu, joka yksinkertaistaa navigointia Next.js-sovelluksissa ja mahdollistaa nopean ja reagoivan asiakaspuolen renderöinnin. Sen suoraviivainen syntaksi ja helppokäyttöisyys tekevät siitä suositun valinnan kehittäjien keskuudessa sivujen välisten linkkien ja dynaamisen reitityksen luomiseen.