Using OG Image Outside of Node

Source: Dev.to

TL;DR

Demo and source code for getting og/image to work in Next.js, SvelteKit, Nuxt, and AnalogJS across various edge environments.

Serverless Functions

If you deploy to regular Serverless functions (Node.js), the packages work out‑of‑the‑box:

Next.js & Vercel Edge

@vercel/og is built for Next.js and works out of the box. Use vercel/og for the pages directory or next/og for the app directory API endpoint.

// app/api/og/route.ts
import { ImageResponse } from 'next/og';

export const runtime = 'edge';

export async function GET() {
  try {
    return new ImageResponse(
      (
        <div
          style={{
            height: '100%',
            width: '100%',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: 'white',
            padding: '40px',
          }}
        >
          <div
            style={{
              fontSize: 60,
              fontWeight: 'bold',
              color: 'black',
              textAlign: 'center',
            }}
          >
            Welcome to My Site
          </div>
          <div
            style={{
              fontSize: 30,
              color: '#666',
              marginTop: '20px',
            }}
          >
            Generated with Next.js ImageResponse
          </div>
        </div>
      ),
      {
        width: 1200,
        height: 630,
      }
    );
  } catch (e) {
    console.error((e as Error).message);
    return new Response('Failed to generate the image', { status: 500 });
  }
}

• Repo: https://github.com/jdgamble555/nextjs-wasm-test
• Demo: https://nextjs-wasm-test-six.vercel.app/

Next.js & Cloudflare

Deploy Next.js to Cloudflare Workers via OpenNext. The same next/og API works, and you can use Tailwind classes via the tw attribute.

// src/app/api/og/route.ts
import { ImageResponse } from 'next/og';

export async function GET() {
  return new ImageResponse(
    <div tw="flex h-full w-full flex-col items-center justify-center bg-white p-10">
      <div tw="text-center text-[60px] font-bold text-black">
        Welcome to My Site
      </div>
      <div tw="mt-5 text-[30px] text-gray-600">
        Generated with Next.js ImageResponse and deployed to Cloudflare
      </div>
    </div>
  );
}

• Repo: https://github.com/jdgamble555/next-cloudflare-og
• Demo: https://next-cloudflare-og.jdgamble555.workers.dev/

SvelteKit & Vercel Edge

A community‑maintained wrapper lets you generate OG images from a Svelte component using @cf-wasm/og under the hood.

1. image-card.svelte

<script lang="ts">
  const { title, website }: { title?: string; website?: string } = $props();
</script>

<div class="bg-slate-50 text-slate-700 w-full h-full flex items-center justify-center p-6">
  <div class="m-1.5 p-6 w-full h-full rounded-3xl text-[72px] flex flex-col border-2 border-slate-700">
    {title?.slice(0, 80) || "Default Title"}
    <hr class="border border-slate-700 w-full" />
    <p class="text-[52px] font-bold flex justify-center">
      {website || "Default Website"}
    </p>
  </div>
</div>

2. image-response.ts

// src/lib/image-response.ts
import type { Component } from 'svelte';
import { render } from 'svelte/server';
import { ImageResponse as OGImageResponse } from '@cf-wasm/og';
import { html } from 'satori-html';

export const prerender = false;

export const ImageResponse = async <T extends Record<string, unknown>>(
  component: Component<T>,
  options?: ConstructorParameters<typeof OGImageResponse>[1],
  props?: T
) => {
  const result = render(component, { props });
  return await OGImageResponse.async(html(result.body), options);
};

3. Edge route (/og/+server.ts)

// src/routes/og/+server.ts
import type { RequestHandler } from '@sveltejs/kit';
import { ImageResponse } from '$lib/image-response';
import ImageCard from '$lib/image-card.svelte';

export const prerender = false;

export const GET = (async ({ url }) => {
  const { width, height } = Object.fromEntries(url.searchParams);

  return await ImageResponse(
    ImageCard,
    {
      width: Number(width) || 1600,
      height: Number(height) || 900,
    },
    {
      title: 'Custom OG Image',
      website: 'Generated with Svelte, Vercel, and Cloudflare WASM!',
    }
  );
}) satisfies RequestHandler;

• Demo: https://svelte-vercel-wasm.vercel.app/
• Repo: https://github.com/jdgamble555/svelte-vercel-wasm

Note: @ethercorps/sveltekit-og also works on the Edge, but its bundle size is currently large.