I haven't tried with the image files, but with the route handlers to generate the OG image as they have done here https://github.com/vercel/next-app-router-playground. Link to repo which I have implemented: https://github.com/dorji-dev/next_app/tree/main/src/app. In short, you create a route handler, in my case api/og/route.tsx and from that return the generated ImageResponse. Now from your layout you do this:

export const metadata: Metadata = {
  title: {
    default: "Next.js App Router",
    template: "%s | Next.js App Router",
  },
  metadataBase: new URL("https://next-app-gamma-lovat.vercel.app"),
  openGraph: {
    title: "Everyday features with Next.js App Router",
    description:
      "A demo of every day features and concepts using NextJs app router",
    images: ["/api/og"],
  },
};

, where you set the route handler path as images src. After hosting, you need to set your domain as metadataBase value like in above.

"Localhost address here"?

Thats not how it works. To test the OG you'll have to host the app somewhere or use some kind of opengraph tester directly on your pc. Online platforms wont work since they obviously dont know what localhost is and how to connect to it.

So basically just set up metadataBase: new URL("https://next-app-gamma-lovat.vercel.app"), for my domain. I am using cloudflare currently and every time i refresh servers to upload changes the url address will be changed. So the best idea is to buy domain and then set metadataBase to my domain address

I use this https://og.nullnull.dev/ to test OG image locally. Has a chrome extension and can verify it's great to be able to test locally

If that's the case then yup buying a custom domain would be the way to go i think.

Okay thanks a lot bro, appreciate it

After hosting you can test it here: https://www.opengraph.xyz/