Node 외부에서 OG Image 사용하기

Source: Dev.to

TL;DR

다양한 엣지 환경에서 Next.js, SvelteKit, Nuxt, AnalogJS가 og/image를 작동하도록 하는 데모와 소스 코드입니다.

Serverless Functions

일반 Serverless 함수(Node.js)로 배포하면 패키지가 바로 동작합니다:

Next.js & Vercel Edge

@vercel/og는 Next.js용으로 만들어졌으며 바로 사용할 수 있습니다. pages 디렉터리에서는 vercel/og를, app 디렉터리 API 엔드포인트에서는 next/og를 사용하세요.

// 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

OpenNext를 통해 Next.js를 Cloudflare Workers에 배포합니다. 동일한 next/og API가 동작하며, tw 속성을 사용해 Tailwind 클래스를 적용할 수 있습니다.

// 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

커뮤니티에서 유지보수하는 래퍼를 사용하면 @cf-wasm/og를 내부에서 활용해 Svelte 컴포넌트로 OG 이미지를 생성할 수 있습니다.

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 라우트 (/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

참고: @ethercorps/sveltekit-og도 Edge에서 동작하지만 현재 번들 크기가 큰 편입니다.