Image component not working in Next.js app deployed to cloudflare pages

I have deployed a Next.js app to Cloudflare pages. The images are not working. I tried implementing a global custom loader as mentioned here

https://developers.cloudflare.com/images/image-resizing/integration-with-frameworks/

But it didn’t work. Is there a way to get it to use the sharp library image optimization that is already in next.js? I already installed sharp and tried with and without the environmental variable (NEXT_SHARP_PATH=/node_modules/sharp) but that too didn’t work.

What am I missing?