Typescript1/5/2026

Next.js Image với blur placeholder

Tạo base64 blur placeholder cho ảnh để UX mượt hơn khi load.

BlurImage.tsx

import Image from 'next/image';

// Generate blur placeholder
const blurData = `data:image/svg+xml;base64,${
  Buffer.from('<svg ...>').toString('base64')
}`;

<Image
  src="/photo.jpg"
  placeholder="blur"
  blurDataURL={blurData}
  fill
  alt="..."
/>