next/image và next/font tối ưu hiệu năng như thế nào?

⚡ Trả lời nhanh

next/image tự resize, chuyển WebP/AVIF, lazy-load và dành sẵn chỗ (width/height hoặc fill) để tránh layout shift; priority cho ảnh LCP. next/font tải font lúc build, self-host cùng domain, dùng size-adjust fallback nên không có request tới Google và giảm CLS.

import Image from "next/image";
import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"], display: "swap" });

export default function Hero() {
  return (
    <main className={inter.className}>
      <Image src="/hero.jpg" alt="Hero" width={1200} height={600} priority />
    </main>
  );
}

Ảnh remote cần khai báo domain trong images.remotePatterns ở next.config.
Dùng sizes cùng fill để browser chọn đúng kích thước ảnh responsive.
priority chỉ dùng cho ảnh above-the-fold (preload, tắt lazy-load).