Next JS 및 Placeholder를 사용하여 흐림 자리 표시자 이미지 만들기

자리 표시자가 없는 이미지 로드는 웹 사이트에서 오류를 발생시킵니다. 우리는 사용자가 이미지가 여전히 서버에서 가져오고 있다는 것을 알고 페이지가 완전히 로드되지 않을 때 가능한 한 빨리 피드백을 제공하기를 바랍니다. Unsplash와 같은 일부 웹사이트에는 웹사이트에 약간의 미학을 추가하는 블러 이미지 자리 표시자가 있습니다.

1.자리 표시자 설치

이미 npx create next-app를 사용하여 새 다음 앱을 만든 다음 자리 표시자 종속성을 설치했다고 가정합니다.

npm i plaiceholder @plaiceholder/next sharp

2. 이미지 자산 설정

로컬 또는 원격에서 이미지 자산을 가져올 수 있습니다. 이 자습서에서는 Pixabay API에서 얻은 데이터를 사용하여 네트워크 다운로드 프로세스를 시뮬레이션합니다.

3. 다음 Js 구성

이 구성은 모든 Plaiceholder 함수가 기본 스레드에서 시작되고 getStaticProps 함수에서 함수를 실행할 수 있도록 합니다. Next.js Image Optimization API에서 제공하려는 이미지 공급자 도메인을 정의하는 것을 잊지 마십시오.

const { withPlaiceholder } = require("@plaiceholder/next");

module.exports = withPlaiceholder({
    images: {
        domains: ["pixabay.com"],
    },
});

3. getStaticProps로 정적 HTML 페이지 생성

getStaticProps 내부에 작성된 코드는 브라우저에서 실행되지 않습니다. 따라서 getPlaiceHolder와 같은 노드 js 환경 기능을 서버에서 실행할 때 실행할 수 있습니다. 이 기능 내에서 Prisma와 같은 ORM을 사용하여 데이터베이스에 액세스할 수도 있습니다.

export async function getStaticProps() {
  const { hits } = await axios
    .get("https://pixabay.com/api/", {
      params: {
        key: "your_api_key",
        q: "cat",
        image_type: "photo",
      },
    })
    .then((res) => {
      return res.data;
    });

  const images_data = await Promise.all(
    hits.slice(0, 6).map(async (data, index) => {
      const { base64, img } = await getPlaiceholder(data.largeImageURL);
      return {
        ...img,
        base64: base64,
      };
    })
  ).then((value) => value);

  return {
    props: {
      images_data,
    },
  };
}

4. 페이지 구성 요소로 렌더링

페이지 구성 요소에 제공하려는 데이터와 함께 props 속성을 전달합니다.

export default function NextBlurImage({ images_data }) {
   //The rest of the code..
      {images_data.map((data) => {
           return (
               <Image
                  src={data.src}
                  layout="fill"
                  alt=""
                  blurDataURL={data.base64}
                  placeholder="blur"
               />
           );
      })}
  //The rest of the code..
}

5. 결과

보시다시피 흐릿한 이미지가 원본 이미지보다 먼저 나타납니다. 이는 또한 사용자가 뷰포트에 있을 때 이미지를 로드하는 지연 로딩을 적용합니다.