Edge Runtime
Use Better OG on the Next.js Edge runtime with next/og.
Import
import { createOgRouteHandler } from "@better-og/next/edge";Usage
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