Navigoinnin Optimointi Next.js:ssä
Pyyhkäise näyttääksesi valikon
Nyt kun kaikki tarvittavat sivut ovat valmiina, tarkastellaan, miten käyttäjät voivat siirtyä niiden välillä. Perinteisesti käytettäisiin oletuksena HTML:n <a>-tagia. Tämän lähestymistavan ongelmana on kuitenkin se, että se aiheuttaa koko sivun uudelleenlatauksen, mikä heikentää käyttökokemusta.
Next.js suosittelee käyttämään <Link>-komponenttia, jonka avulla voidaan toteuttaa asiakaspuolen navigointi.
Lisätietoja asiakaspuolen navigoinnista löytyy dokumentaatiosta: docs
Vaihtoehtoisesti voit jatkaa projektin parissa. Voit luottaa siihen, että Link-komponentin käyttö on parempi ratkaisu, ja näemme sen käytännön toteutuksen projektissa.
Takaisin projektiin
Asiakaspuolen navigoinnin toteuttamiseksi siirry tiedostoon app/ui/dashboard/nav-links.tsx, tuo Link-komponentti tiedostosta next/link ja korvaa <a>-tagi <Link>-komponentilla.
Kun olet tallentanut muutoksesi, testaa localhost-ympäristöäsi varmistaaksesi saumattoman sivunavigoinnin ilman sivun uudelleenlatausta.
Käytännössä
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
