Next.js에서 이미지 블러 적용하기

import Image from "next/image";
import Link from "next/link";
import BackgroundImage from "@/../public/background.webp";
 
export default function StaticPage() {
  return (
    <div className="p-10">
      <Link href="/static">
        <h1 className="text-4xl font-bold">Static</h1>
      </Link>
      <Image
        src={BackgroundImage}
        alt="background"
        placeholder="blur"
        width={330}
        height={120}
      />
    </div>
  );
}

pnpm install plaiceholder sharp

import { getPlaiceholder } from "plaiceholder";
import fs from "fs";
import path from "path";
 
const getBlurDataUrl = async (imgSrc: string) => {
  try {
    if (imgSrc.startsWith("/")) {
      const publicDir = path.join(process.cwd(), "public");
      const filePath = path.join(publicDir, imgSrc);
 
      if (!fs.existsSync(filePath)) {
        console.error(`이미지 파일이 존재하지 않습니다: ${filePath}`);
        return "";
      }
 
      const buffer = fs.readFileSync(filePath);
      const { base64 } = await getPlaiceholder(buffer, { size: 10 });
      return base64;
    } else {
      const buffer = await fetch(imgSrc).then(async (res) =>
        Buffer.from(await res.arrayBuffer())
      );
      const { base64 } = await getPlaiceholder(buffer, { size: 10 });
      return base64;
    }
  } catch (e) {
    console.error("Blur 이미지 생성 오류:", e);
    return "";
  }
};
 
export default getBlurDataUrl;

import Image from "next/image";
import Link from "next/link";
import getBlurDataUrl from "@/utils/getBlurDataURL";
 
const ImageList = [
  { src: "/1.webp", alt: "1" },
  { src: "/2.webp", alt: "2" },
  { src: "/3.webp", alt: "3" },
  { src: "/4.webp", alt: "4" },
];
 
export default function DynamicPage() {
  return (
    <div className="p-10">
      <Link href="/dynamic">
        <h1 className="text-4xl font-bold">Dynamic</h1>
      </Link>
      {ImageList.map(async (image, index) => {
        const blurDataURL = await getBlurDataUrl(image.src);
        return (
          <Image
            width={400}
            height={225}
            key={index}
            src={image.src}
            alt={image.alt}
            placeholder="blur"
            blurDataURL={blurDataURL}
          />
        );
      })}
    </div>
  );
}