Next.js: how to apply sharp lib in Next.js

Question

next/image changes too slow, so I see the old images and then new images appear. For this issue, I have referred below:

Next/Image's components are too slow to appear

Install sharp by running yarn add sharp in your project directory and then reboot the server by running next start again

All of them say I should use sharp.

So I have added sharp. My question is should I just install sharp and restart server? Do I not need to import sharp and do some code?

I actually tried this way below:

import Link from 'next/link';
import Image from 'next/image';

const sharp = require('sharp');

const CustomImage = ({ src, href}) => {

  const rotateImage = () => {
    sharp(src)
  }
  
useEffect(() => {
  rotateImage()
}, [])

  return (
    <Link href={href} passHref>
        <span >
          <Image src={rotateImage}/>
        </span>
    </Link>
  );
};

export default CustomImage;

But it gives me this error:

Module not found: Can't resolve 'child_process'

How do I apply sharp in Next.js?