Next.js Image Component Causing Flicker on Client-Side Navigation Between Pages
I'm stuck on something that should probably be simple..... I'm experiencing a flicker effect when using the Next.js Image component during client-side navigation between pages. The images do not seem to preload correctly, causing a noticeable delay before they are displayed. I've ensured that I'm using `next/image` version 12.2.0, and the images are being pulled from a CDN. Here's what my code looks like: ```javascript import Image from 'next/image'; const MyComponent = () => { return ( <div> <Image src="https://cdn.example.com/my-image.jpg" alt="My Image" width={600} height={400} priority={true} /> </div> ); }; export default MyComponent; ``` I've tried setting the `priority` prop as I read it can help with loading images faster, but the flicker still continues. I also ensured that my images are optimized and served in WebP format to minimize loading times. In addition, I've checked my `next.config.js`, which looks like this: ```javascript module.exports = { images: { domains: ['cdn.example.com'], }, }; ``` When I navigate using the Next.js Link component, I see that the images flicker for a split second before the new page loads. I'm not sure if this is a caching scenario or if there's something I need to configure differently. Has anyone else encountered this scenario and found a solution? I'm working on a API that needs to handle this. Is there a better approach? For context: I'm using Javascript on Linux. What am I doing wrong?