next/image ialah penggantian <img> tag yang dioptimalkan oleh Next.js. Ia secara automatik menggunakan timbunan amalan terbaik prestasi imej yang sebaliknya anda laksanakan secara manual.
tsx
;
() {
(
);
}
next/image ialah penggantian <img> tag yang dioptimalkan oleh Next.js. Ia secara automatik menggunakan timbunan amalan terbaik prestasi imej yang sebaliknya anda laksanakan secara manual.
;
() {
(
);
}
srcset responsif — menjana berbilang saiz supaya setiap peranti memuat turun yang betul.priority).width/height yang diperlukan (atau fill) menempah ruang supaya halaman tidak melompat apabila imej memuatkan.placeholder="blur" menunjukkan pratonton samar-samar kecil semasa memuatkan.<div style={{ position: "relative", height: 300 }}>
<Image src="/hero.jpg" alt="" fill style={{ objectFit: "cover" }} />
</div>
Gunakan fill (bukan lebar/tinggi tetap) apabila imej harus mengisi induk yang diposisikan — biasa untuk imej pahlawan/sampul.
// next.config.js — allowlist remote hosts for security
module.exports = { images: { remotePatterns: [{ hostname: "cdn.example.com" }] } };
Imej biasanya adalah aset paling berat di halaman dan punca utama Core Web Vitals yang lemah (LCP, CLS). next/image mengautomasikan mengubah saiz, format moden, srcset responsif, pemuatan malas, dan pencegahan anjakan tata letak — mengubah tugas prestasi utama menjadi satu komponen, dengan priority untuk imej LCP menjadi satu-satunya kenop yang mesti anda ingati.