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ớ.
Thư viện câu hỏi phỏng vấn IT với đáp án chi tiết — từ Junior đến Senior.
Ủng hộ