Platform-aware Open Graph image helpers with sane aspect-ratio defaults, locale-aware font loading, and adapters for Next.js, Edge runtimes, Workers, and TanStack Start.

How do I use Better OG?

Better-og provides easy-to-use helpers for generating Open Graph images. You can integrate it with Next.js, Edge runtimes, Workers, and TanStack Start using our dedicated adapters.

Yes, Better OG is completely free and open-source under the MIT license.

Вступ

Platform-aware Open Graph rendering з адаптивним layout і багатомовними шрифтами.

Огляд

better-og — це toolkit для Open Graph зображень, який автоматично підлаштовує розмір і layout під платформу, що запитує зображення.

Визначення платформи за реальними сигналами request.
Готові aspect ratio та safe area.
Адаптери для Next.js, Workers і TanStack Start.

Встановлення

Встановлюйте лише пакети для вашого runtime і повторно використовуйте той самий OG component у різних середовищах.

pnpm add @better-og/core next react

Перший route

Створіть OG handler, завантажте шрифти й поверніть component, який треба відрендерити як зображення.

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],
  }),
  fallbackLocales: ["ja"],
});

export const GET = createOgRouteHandler({
  component: (ogContext) => (
    <div
      style={{
        display: "flex",
        width: "100%",
        height: "100%",
        alignItems: "center",
        justifyContent: "center",
        fontFamily: fontSetup.families.base,
        paddingBottom: 32 + ogContext.safeArea.bottom,
        background: "linear-gradient(135deg, #0d192c, #174a70, #4993d6)",
        color: "white",
      }}
    >
      <div style={{ fontSize: 64, fontWeight: 700 }}>Hello from better-og</div>
    </div>
  ),
  baseFonts: fontSetup.fonts,
});

Додати proxy

Додайте withOgRewrite, щоб platform, layout і aspect_ratio заповнювалися автоматично.

proxy.ts

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

export async function proxy(request: NextRequest) {
  return await withOgRewrite(request);
}

export const config = {
  matcher: ["/og/:path*"],
};

Конфігурація Next.js

Якщо використовуєте Takumi на Node, залишайте пакет external у Next.js.

next.config.ts

import type { NextConfig } from "next";

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

export default nextConfig;

Edit on GitHub

Last updated on