next/image là bản thay thế đã tối ưu của Next.js cho thẻ <img>. Nó tự động áp dụng một loạt best practice về hiệu năng hình ảnh mà bạn lẽ ra phải tự làm bằng tay.
tsx
;
() {
(
);
}
next/image là bản thay thế đã tối ưu của Next.js cho thẻ <img>. Nó tự động áp dụng một loạt best practice về hiệu năng hình ảnh mà bạn lẽ ra phải tự làm bằng tay.
;
() {
(
);
}
srcset responsive — sinh ra nhiều kích thước để mỗi thiết bị tải đúng cái nó cần.priority).width/height bắt buộc (hoặc fill) chừa chỗ để trang không nhảy khi ảnh tải xong.placeholder="blur" hiển thị một bản xem trước mờ nhỏ trong khi tải.<div style={{ position: "relative", height: 300 }}>
<Image src="/hero.jpg" alt="" fill style={{ objectFit: "cover" }} />
</div>
Dùng fill (thay vì width/height cố định) khi ảnh cần lấp đầy phần tử cha đã được định vị — phổ biến cho ảnh hero/cover.
// next.config.js — allowlist các host từ xa vì lý do bảo mật
module.exports = { images: { remotePatterns: [{ hostname: "cdn.example.com" }] } };
Ảnh thường là tài nguyên nặng nhất trên một trang và là nguyên nhân hàng đầu khiến Core Web Vitals (LCP, CLS) kém. next/image tự động hóa việc resize, format hiện đại, srcset responsive, lazy loading và ngăn layout shift — biến một việc tốn công về hiệu năng thành một component duy nhất, với priority cho ảnh LCP là cái núm duy nhất bạn phải nhớ.