Tối ưu ảnh & font trong Next.js để web mở cái “rụp”

Hướng dẫn thực chiến sử dụng next/image và next/font giúp website tải trang dưới 2 giây, ghi điểm tuyệt đối với Google.

nextjs

performance

optimization

frontend

Sức mạnh của next/image Đừng dùng thẻ `<img>` thông thường! Component `<Image>` của Next.js tự động resize hình ảnh, chuyển đổi sang định dạng WebP/AVIF và lazy load out-of-the-box.

tsx

<Image src="/hero.jpg" alt="Hero" width={1200} height={630} priority // Thêm priority cho ảnh LCP (ảnh hiện đầu trang) /> ```

Tối ưu Font với next/font Truyền thống chúng ta lấy font từ thẻ `<link>` của Google Fonts, gây ra network request riêng và lỗi FOIT (chữ bị chớp). `next/font` tải bộ font ngay từ server (build time) và host chung với app của bạn.

tsx

const inter = Inter({ subsets: ['latin'] })

export default function MyApp({ Component, pageProps }) { return ( <main className={inter.className}> <Component {...pageProps} /> </main> ) } ``` Web tải nhanh không chỉ tốt cho UX mà còn tăng điểm SEO đáng kể!