Better OG

Next.js (Node)

Use Better OG with the Next.js Node runtime, supporting both next/og and Takumi renderers.

Import

import {
  createOgRouteHandler,
  loadGoogleFontForImageResponse,
  withOgRewrite,
} from "@better-og/next";

Basic Usage

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

export const runtime = "nodejs";
export const revalidate = false;

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

export const GET = createOgRouteHandler({
  component: (ogContext) => (
    <div
      style={{
        width: "100%",
        height: "100%",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        fontFamily: fontSetup.families.base,
        paddingBottom: 24 + ogContext.safeArea.bottom,
        background: "#000",
        color: "#fff",
        fontSize: 48,
      }}
    >
      My OG Image
    </div>
  ),
  baseFonts: fontSetup.fonts,
});

Renderers

By default, @better-og/next uses next/og.

If you need Takumi on the Node runtime:

export const GET = createOgRouteHandler({
  renderer: "takumi",
  component: myComponent,
  baseFonts: fontSetup.fonts,
});

When using Takumi, keep it external in Next.js:

next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  serverExternalPackages: ["@takumi-rs/image-response"],
};

export default nextConfig;

Proxy

Use withOgRewrite to detect the caller platform and append normalized platform, layout, and aspect_ratio query values.

proxy.ts
import { withOgRewrite } from "@better-og/next";
import type { NextRequest } from "next/server";

export async function proxy(request: NextRequest) {
  return await withOgRewrite(request, { pathnamePrefix: "/og" });
}
Edit on GitHub

Last updated on

On this page

ImportBasic UsageRenderersProxy