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

I webutvikling er det vanlig å fremheve aktive lenker basert på gjeldende side.

I Next.js kan vi oppnå dette ved å bruke `usePathname()`-hooken. Denne hooken sjekker gjeldende sti i appen, slik at vi kan implementere dynamisk fremheving for den tilsvarende siden med `clsx`-biblioteket.

## Tilbake til prosjektet
For å bruke `usePathname()`-hooken, må du gjøre `nav-links.tsx` om til en klientkomponent. Start med å legge til `"use client"`-direktivet øverst i filen.

Nå kan vi bruke `usePathname`-hooken og ta den i bruk.

Til slutt, bruk `clsx`-biblioteket for å tildele stiler betinget. Angi betingelsen slik at hvis `pathname` er lik `link.href`, endres bakgrunnsfargen til `bg-neutral-600`.

Lær å bygge moderne, høytytende webapplikasjoner med Next.js. Sett opp prosjekter med strukturerte oppsett, styling og ruting for sømløs navigasjon. Hent og vis data effektivt samtidig som du optimaliserer rendering og ytelse. Implementer avanserte funksjoner som paginering, CRUD-operasjoner og globalt søk for dynamiske webapplikasjoner. Distribuer dine Next.js-prosjekter, koble dem til databaser og legg til autentisering for å beskytte brukerdata.

Vi skal diskutere hva du bør kunne før du begynner med Next.js-rammeverket, hva du kan forvente av dette kurset, og hva du kommer til å bygge.

Vi setter opp prosjektet, undersøker måter å legge til styling i appen vår på, og dekker visuelle aspekter som bilder, fonter, sider og oppsett.

Lær hvordan du enkelt kan opprette og administrere et nytt visningsbilde for applikasjonen din, samt navigere sømløst mellom alle sider med et integrert rutingsystem.

Distribuer Next.js-appen ved hjelp av GitHub- og Vercel-kontoer. Etabler i tillegg en database for å levere nødvendig data til appen.

Vurder hvordan data kan hentes og vises for brukeren på en tydelig og effektiv måte.

Lær hvordan du implementerer moderne nettfunksjoner som paginering, CRUD-operasjoner, globalt søk, skjemavalidering og mer.

Implementering av autentisering i Next.js.

Oppretting og Håndtering av Aktive Lenker

Tilbake til prosjektet

I praksis

Awesome!

Oppretting og Håndtering av Aktive Lenker

Tilbake til prosjektet

I praksis