Undesirable Image Flickering in Next.js

import Image from "next/image";
import yourImage from 
"../public/yourimage.png";

const YourComponent = () => {
  return (
    <div>
    {/* Remote Images */}
      {/* <Image
        src={"/yourimage.png"}
        height={100}
        width={100}
        alt=""
      /> */}
    {/* Local Images */}
      <Image
        src={yourImage}
        // You don't need to specify 
        //either height nor width but
        // you should if you wan't to
        // change the size  
        // height={100} 
        width={100}
        // Optional blur-up 
        // while loading
        placeholder="blur"
        alt=""
      />
    </div>
  );
};

export default YourComponent;

For local Images Next.js will automatically determine the width and height of your image based on the imported file. These values are used to prevent Cumulative Layout Shift while your image is loading.

Learn more about the topic:

https://nextjs.org/docs/app/building-your-application/optimizing/images