Summary
This chapter covers how to enable client-side navigation by replacing standard anchor tags with a Link component to achieve seamless page transitions without full reloads.

General domain of usage
Web application development

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: <a href="https://nextjs.org/docs/app/getting-started/linking-and-navigating#how-routing-and-navigation-works" target="_blank"><svg width="1em" height="1em" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M17.289 17.305v0c-1.754 1.754-4.597 1.754-6.351 0l-7.76-7.759c-1.755-1.755-1.755-4.601 0-6.356v0c1.753-1.753 4.595-1.756 6.351-0.005l6.208 6.187"></path><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M12.504 13.97v0c1.754-1.754 4.597-1.754 6.351 0l7.762 7.762c1.754 1.754 1.754 4.597 0 6.351v0c-1.754 1.754-4.597 1.754-6.351 0l-5.953-5.953"></path></svg> docs</a>

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.

Huomio

## 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.

Opi rakentamaan moderneja, suorituskykyisiä web-sovelluksia Next.js:llä. Luo projekteja, joissa on jäsennelty ulkoasu, tyylittely ja reititys sujuvaa navigointia varten. Nouda ja näytä dataa tehokkaasti samalla kun optimoit renderöintiä ja suorituskykyä. Toteuta edistyneitä ominaisuuksia, kuten sivutus, CRUD-toiminnot ja globaali haku dynaamisia web-sovelluksia varten. Julkaise Next.js-projektisi, yhdistä ne tietokantoihin ja lisää autentikointi käyttäjätietojen suojaamiseksi.

Käydään läpi, mitä tulee hallita ennen Next.js-kehykseen perehtymistä, mitä tältä kurssilta voi odottaa ja mitä tulet rakentamaan.

Projektin perustaminen, tyylien lisäämistavat sovellukseen sekä visuaalisten osa-alueiden, kuten kuvien, fonttien, sivujen ja asetteluiden käsittely.

Opi luomaan ja hallitsemaan sovelluksesi uusia näkymiä vaivattomasti sekä navigoimaan saumattomasti kaikkien sivujen välillä sisäänrakennetun reititysjärjestelmän avulla.

Ota Next.js-sovellus käyttöön GitHub- ja Vercel-tunnusten avulla. Perusta lisäksi tietokanta, joka toimittaa sovellukselle tarvittavat tiedot.

Pohdi, miten data hankitaan ja esitetään käyttäjälle selkeästi ja tehokkaasti.

Opi toteuttamaan moderneja verkkosivustojen ominaisuuksia, kuten sivutus, CRUD-toiminnot, globaali haku, lomakkeiden validointi ja paljon muuta.

Navigoinnin Optimointi Next.js:ssä

Takaisin projektiin

Käytännössä

Navigoinnin Optimointi Next.js:ssä

Takaisin projektiin

Käytännössä