Navigoinnin Optimointi Next.js:ssä
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
Can you explain how the Link component improves navigation compared to the <a> tag?
What else can I customize when using the Next.js Link component?
Are there any best practices for using client-side navigation in Next.js?
Awesome!
Completion rate improved to 2.08Navigoinnin 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!
