Summary  
This chapter demonstrates how to convert a component to a client component, use a hook to obtain the current path, and leverage a class-name utility to conditionally apply styles to navigation links based on that path.

General domain of usage  
Web navigation menus

Verkkokehityksessä on yleistä korostaa aktiiviset linkit nykyisen sivun perusteella.

Next.js:ssä tämä onnistuu käyttämällä `usePathname()`-hookia. Tämä hook tarkistaa sovelluksen nykyisen polun, jolloin voimme toteuttaa dynaamisen korostuksen vastaavalle sivulle `clsx`-kirjaston avulla.

## Takaisin projektiin
Hyödynnäksesi `usePathname()`-hookia, muuta `nav-links.tsx` Client-komponentiksi. Aloita lisäämällä tiedoston alkuun `"use client"` -direktiivi.

Nyt voimme käyttää `usePathname`-hookia ja hyödyntää sitä.

Lopuksi hyödynnetään `clsx`-kirjastoa tyylien ehdolliseen soveltamiseen. Aseta ehto siten, että jos `pathname` on yhtä kuin `link.href`, taustaväri muutetaan arvoksi `bg-neutral-600`.

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.

Aktiivisten Linkkien Luominen ja Hallinta

Takaisin projektiin

Käytännössä