Kuvat ovat merkittävässä roolissa minkä tahansa verkkosivuston visuaalisessa ilmeessä. Tarkastellaan, kuinka niitä lisätään Next.js:ssä.

<Image>-komponentti on kehittyneempi versio perinteisestä HTML:n <img>-tagista, ja se tarjoaa joukon automaattisia optimointeja. Se on suunniteltu ratkaisemaan modernin verkkosuunnittelun haasteita ja varmistamaan visuaalisesti vakaan käyttökokemuksen vähentämällä asettelun muutoksia latausvaiheessa. Komponentti myös muuttaa kuvien kokoa älykkäästi, mikä pienentää kaistanleveyden kulutusta pienemmillä näytöillä ja optimoi näin sisällön toimituksen.

Takaisin projektiin

Tarkastellaan, kuinka kuvat lisätään projektiin. public-kansiosta löytyy hero-desktop.png ja hero-mobile.png. Nyt ne sisällytetään tiedostoon app/page.tsx käyttämällä Image-komponenttia kirjastosta next/image.

Kun siirryt sovelluksen etusivulle, kuvan tulisi näkyä.

Mobiiliversiota varten lisää toinen kuva, jonka leveys on 560px ja korkeus 620px. Jos kohtaat ongelmia, katso alla oleva ratkaisu.

Käytännössä