Summary  
This chapter covers using Next.js’ Image component to automatically optimize, lazily load, and responsively render images with intelligent resizing and support for modern formats to ensure layout stability.  

General domain of usage  
Front-end web development

Bilder har en betydelig rolle i det visuelle uttrykket til ethvert nettsted. La oss se nærmere på hvordan de legges til i Next.js.

`<Image>`-komponenten er en avansert versjon av den tradisjonelle HTML-`<img>`-taggen, og tilbyr en rekke automatiske optimaliseringer. Den er utviklet for å håndtere kompleksiteten i moderne webdesign og sikrer en visuelt stabil brukeropplevelse ved å redusere layoutskift under innlasting. Komponenten endrer også bildestørrelsen intelligent, noe som reduserer båndbreddebruk på enheter med mindre skjerm, og dermed optimaliserer innholdsleveringen.

La oss se hvordan vi kan inkludere bilder i prosjektet vårt. I `public`-mappen finner du `hero-desktop.png` og `hero-mobile.png`. Nå skal vi legge dem til i `app/page.tsx`-filen ved å bruke `Image`-komponenten fra `next/image`.

Når du navigerer til appens startside, skal bildet være synlig.

For mobilversjonen, legg til et annet bilde med en bredde på `560px` og en høyde på `620px`. Hvis du støter på problemer, kan du se på løsningen som er gitt nedenfor.

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.

Håndtering av Bilder i Next.js

Tilbake til prosjektet

I praksis

Awesome!

Håndtering av Bilder i Next.js

Tilbake til prosjektet

I praksis