Returning / Rendering Satori SVG from Next.JS API route?

[dominik-sfl]

I am trying to use satori in a similar way to vercel/og, but I need to use node.js runtime. However, I struggle to understand how to return the generated svg from my api, as an svg?

So far, what I have is this:

import { NextResponse } from 'next/server'
import satori from 'satori'
import fs from 'fs/promises'

export const runtime = 'nodejs'

export async function GET(req, res) {
  let fontUrl = "/Users/dominik/projects/site/src/app/assets/fonts/NotoSans/NotoSans-Bold.ttf"
  const fontArrayBuf = await fs.readFile(fontUrl)

const svg = await satori(
  <div style={{ color: 'black' }}>hello, world</div>,
  {
    width: 600,
    height: 400,
    fonts: [
      {
        name: 'Noto',
        data: fontArrayBuf,
        weight: 400,
        style: 'normal',
      },
    ],
  },
)
  
console.log(svg)

  return NextResponse.json({ data: svg })
}

It does seem to generate an svg, but I don't know how to return it and display it in the browser from my next.js api route? Is there something I am missing?

[zirlman]

Hi,

take a look at Nextjs Image Response