Next.js

Image Optimization dengan next/image

Penjelasan

Komponen <Image> dari next/image menggantikan <img> biasa — otomatis mengoptimalkan gambar (resize sesuai kebutuhan, convert ke format modern seperti WebP, lazy loading di luar viewport) TANPA konfigurasi tambahan. Wajib mengisi width dan height (atau memakai fill) supaya Next.js tahu rasio gambarnya dari awal, mencegah layout shift saat gambar dimuat.

Contoh Konsep

import Image from 'next/image';

export default function Profil() {
    return (
        <Image
            src="/foto-profil.jpg"
            alt="Foto profil"
            width={200}
            height={200}
        />
    );
}

Praktikum

Buat komponen KartuProduk yang menampilkan gambar produk lewat next/image, src="/produk/kaos.jpg", width dan height 300, plus alt text yang deskriptif.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Lupa mengisi width/height (atau fill) di <Image> akan membuat Next.js ERROR SAAT BUILD, bukan cuma warning — beda dengan <img> biasa yang tetap jalan tanpa dimensi eksplisit meski kurang optimal, next/image sengaja memaksa ini dari awal untuk mencegah layout shift.

← Kembali Metadata & SEO Lanjutkan → Client-side State di Next.js