progress Images (for UX)

55555-Jyeon commented 6 months ago

⬇️ install

$ npm install sharp plaiceholder

reference site → https://www.yzlow.com/progressive-image-loading-with-nextjs

55555-Jyeon commented 6 months ago

"use client";

import type { NextPage, InferGetStaticPropsType } from "next";
import style from "./page.module.css";
import Image from "next/image";
import profile from "../../public/profile.jpg";
import { getPlaiceholder } from "plaiceholder";
import { useRouter } from "next/navigation";
import fs from "fs/promises"; // Node.js 14.0.0 이상에서는 fs/promises를 사용할 수 있습니다.

export const getServerSideProps = async () => {
  // 이미지 파일을 읽어서 Buffer로 전달
  const imagePath = "./public/profile.jpg";
  const imageBuffer = await fs.readFile(imagePath);

  // Remote Image (from external url or relative url like `/my-image.jpg`)
  const remoteImageProps = await getPlaiceholder(imageBuffer);

  return {
    props: {
      remoteImageProps,
    },
  };
};

const Home: NextPage<InferGetStaticPropsType<typeof getServerSideProps>> = ({
  remoteImageProps,
}) => {
  const router = useRouter();

  return (
    <main className={style.main}>
      <div className={style.ImageContainer}>
        <Image
          onClick={() => router.push("/Amy")}
          placeholder="blur"
          blurDataURL={remoteImageProps.base64}
          fill
          src={profile.src} // 이미지 소스를 remoteImageProps에서 가져오도록 수정
          style={{
            objectFit: "cover",
          }}
          className={style.profile}
          alt="profile image"
        />
      </div>
      <div className={style.textbox}>
        <p>JUYEON OH</p>
        <p>FE DEVELOPER</p>
      </div>
      <p className={style.copyright}>
        copyright &copy; all rights reserved to juyeonOH
      </p>
    </main>
  );
};

export default Home;

참고해서 위와 같이 작성했는데 에러 발생.. 🥹 일단 패스..

55555-Jyeon commented 6 months ago

https://www.npmjs.com/package/react-progressive-image

55555-Jyeon / portfolio

progress Images (for UX) #3