Implementing dynamic SVG generation in NextJs 14 using Satori by Vercel.

action.ts

"use server";

import satori from "satori";

export async function generateSVG(obj: any, width: number, height: number) {
  const poppins = await fetch(
    process.env.NEXT_PUBLIC_URL + "/fonts/Poppins-Medium.ttf"
  ).then((r) => r.arrayBuffer());
  const options: any = {
    fonts: [
      {
        name: "Poppins",
        data: poppins,
        weight: 400,
        style: "normal",
        letterSpacing: 0,
      },
    ],
    wordWrap: "on",
    tabSize: 2,
    minimap: {
      enabled: false,
    },
    smoothScrolling: true,
    cursorSmoothCaretAnimation: "on",
    contextmenu: false,
    automaticLayout: true,
    width: width,
    height: height,
  };

  const _result = await satori(obj, options);

  return _result;
}

satori.tsx

async function SatoriService(
  username: string,
  formdata: any,
  formlink: string
) {

  const data = decodeURIComponent(username || "hello");

  const link = `${process.env.NEXT_PUBLIC_URL}/certificate/${
    formlink || "hello"
  }`;


  const bgURL = formdata?.Image?.viewUrl;

  const newLink = `${process.env.NEXT_PUBLIC_CDN_URL}${bgURL}`;

  const [nameTop, nameLeft] = [
    formdata?.xcoordinate || 210,
    formdata?.ycoordinate || 55,
  ];

  const [linkTop, linkLeft] = [
    formdata?.urlxcoordinate || 370,
    formdata?.urlycoordinate || 115,
  ];

  const [dateTop, dateLeft] = [
    formdata?.datexcoordinate,
    formdata?.dateycoordinate,
  ];

  const obj = (
    <div
      style={{
        display: "flex",
        height: "600px",
        width: "900px",
        flexDirection: "column",
        backgroundImage: `url(${newLink})`,
        backgroundRepeat: "no-repeat",
        backgroundPosition: "center",

        backgroundSize: "900px 600px",
        fontSize: 60,
        letterSpacing: -2,
        fontWeight: 700,
        textAlign: "center",
      }}
    >
      <div
        style={{
          color: "black",
          textAlign: "left",
          textTransform: "uppercase",
          top: nameTop,
          left: nameLeft,
          fontSize: 35,
          fontWeight: 600,
        }}
      >
        {data}
      </div>
      <div
        style={{
          color: String(formdata?.colour) || "white",
          display: "flex",
          textAlign: "left",
          textTransform: "uppercase",
          top: dateTop,
          left: dateLeft,
          fontSize: 18,
          fontWeight: 600,
          letterSpacing: -0.5,
          opacity: Number(formdata?.opacity) || 1,
        }}
      >
        {formdata?.datexcoordinate !== "" && date}
      </div>
      <div
        style={{
          color: "#010101",
          textAlign: "left",
          textTransform: "lowercase",
          fontSize: 13,
          top: linkTop,
          left: linkLeft,
          letterSpacing: -0.5,
        }}
      >
        {formdata?.urlxcoordinate !== "" && link}
      </div>
    </div>
  );
  return obj;
}

export default SatoriService;