I have a next js (12.X.X) app that's deployed on netlify. The images on my app are being loaded from various third party hosting services and they are are heavy. Although using next/Image component, the pages are taking quiet a bit of time to load images, impacting core web vitabls score (LCP) on my site.
To overcome this, I am trying to use @netlify/ipx library which needs .netlify/functions. How do I set up .netlify/functions in the app. I am not sure of the folder structure. Do I need to create this folder next to .next folder? do they have to be on same level?
I have created .netlify/folder/ipx.ts
import { createIPXHandler } from "@netlify/ipx";
export const handler = createIPXHandler({
domains: ["images.unsplash.com"],
});
Now, I am trying to render an image with optimised url
<img
src="/.netlify/functions/ipx/f_webp,w_450/https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba" />
But this is not working. Can you help me to figure out what am I missing here? thanks