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

Inden for webudvikling er det almindelig praksis at fremhæve aktive links baseret på den aktuelle side.

I Next.js kan dette opnås ved hjælp af `usePathname()`-hooken. Denne hook kontrollerer den aktuelle sti i appen, hvilket gør det muligt at implementere dynamisk fremhævning af den tilsvarende side med `clsx`-biblioteket.

## Tilbage til projektet
For at anvende `usePathname()`-hooken skal du konvertere `nav-links.tsx` til en Client Component. Begynd med at tilføje `"use client"`-direktivet øverst i filen.

Nu kan vi bruge `usePathname` hooken og anvende den.

Afslutningsvis anvendes `clsx`-biblioteket til betinget at tilføje stilarter. Angiv betingelsen således, at hvis `pathname` er lig med `link.href`, ændres baggrundsfarven til `bg-neutral-600`.

Lær at opbygge moderne, højtydende webapplikationer med Next.js. Opsæt projekter med strukturerede layouts, styling og routing for problemfri navigation. Hent og vis data effektivt, mens du optimerer rendering og ydeevne. Implementer avancerede funktioner som paginering, CRUD-operationer og global søgning for dynamiske webapps. Udrul dine Next.js-projekter, tilslut dem til databaser, og tilføj autentificering for at beskytte brugerdata.

Vi gennemgår, hvad du bør have kendskab til, før du går i gang med Next.js-rammeværket, hvad du kan forvente af dette kursus, og hvilke projekter du kommer til at bygge.

Vi opsætter projektet, undersøger metoder til at tilføje styling til vores app og dækker visuelle aspekter såsom billeder, skrifttyper, sider og layouts.

Lær, hvordan du nemt opretter og administrerer et nyt view til din app og navigerer problemfrit gennem alle sider med et integreret routing-system.

Udrul Next.js-appen ved hjælp af GitHub- og Vercel-konti. Etabler desuden en database for at forsyne appen med de nødvendige data.

Overvej, hvordan data kan indhentes og vises for brugeren på en klar og effektiv måde.

Opdag, hvordan moderne webfunktioner som paginering, CRUD-operationer, global søgning, formularvalidering og mere implementeres.

Implementering af autentificering i Next.js.

Oprettelse og Håndtering af Aktive Links

Tilbage til projektet

I praksis

Awesome!

Oprettelse og Håndtering af Aktive Links

Tilbage til projektet

I praksis