How do I set up netlify/functions in next js app hosted on netlify

Question

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