diff --git a/docs/02-app/02-api-reference/02-file-conventions/01-metadata/opengraph-image.mdx b/docs/02-app/02-api-reference/02-file-conventions/01-metadata/opengraph-image.mdx index 9905874b54d44..434683518e6b1 100644 --- a/docs/02-app/02-api-reference/02-file-conventions/01-metadata/opengraph-image.mdx +++ b/docs/02-app/02-api-reference/02-file-conventions/01-metadata/opengraph-image.mdx @@ -392,6 +392,65 @@ export default async function Image({ params }) { } ``` +#### Using Edge runtime with local assets + +This example uses the Edge runtime to fetch a local image on the file system and passes it as an `ArrayBuffer` to the `src` attribute of an `` element. + +```jsx filename="app/opengraph-image.js" switcher +import { ImageResponse } from 'next/og' +import { readFile } from 'node:fs/promises' + +export const runtime = 'edge' + +export async function GET() { + const logoSrc = await fetch(new URL('./logo.png', import.meta.url)).then( + (res) => res.arrayBuffer() + ) + + return new ImageResponse( + ( +