Better OG

Edge Runtime

Use Better OG on the Next.js Edge runtime with next/og.

Import

import { createOgRouteHandler } from "@better-og/next/edge";

Usage

app/og/[lang]/route.tsx
import { resolveFontSetup } from "@better-og/core";
import { loadGoogleFontForImageResponse } from "@better-og/next";
import { createOgRouteHandler } from "@better-og/next/edge";

export const runtime = "edge";

const fontSetup = await resolveFontSetup({
  baseFonts: await loadGoogleFontForImageResponse({
    family: "Geist",
    weights: [400, 700],
  }),
});

export const GET = createOgRouteHandler({
  component: (
    <div
      style={{
        width: "100%",
        height: "100%",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        fontFamily: fontSetup.families.base,
        background: "linear-gradient(140deg, #0e102a, #1d557a, #44bc9b)",
        color: "#fff",
        fontSize: 48,
      }}
    >
      Edge OG Image
    </div>
  ),
  baseFonts: fontSetup.fonts,
});

Limitation

The Next.js Edge adapter uses next/og. If you need Takumi WASM directly, use @better-og/edge in a runtime where you can provide the explicit Takumi module yourself.

Edit on GitHub

Last updated on

On this page