I currently have a opengraph-image.tsx file located in /src/app/servers/[id] with this content:

import { ImageResponse } from "next/og";

export const contentType = "image/png";

export default async function Image({ params }: { params: { id: string } }) {
  console.log(params.id);

  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 128,
          background: "white",
          width: "100%",
          height: "100%",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        {params.id}
      </div>
    )
  );
}

however for some reason, next.js is not outputting a og:image into the page when i use inspect element or view page source.
i've tried running as production (next build, next start) and as next dev on my local machine
im using next.js v14.2.15