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.

Giris

Uyarlanabilir layout ve cok dilli fontlarla platform-aware Open Graph rendering.

Genel bakis

better-og, gorseli isteyen platforma gore OG gorselinin boyutunu ve layout'unu otomatik ayarlayan bir araç takimidır.

Gercek request sinyallerinden platform tespiti.
Hazir aspect ratio ve safe area degerleri.
Next.js, Workers ve TanStack Start icin adaptorler.

Kurulum

Sadece hedef runtime'iniza gereken paketleri kurun ve ayni OG component'i farkli ortamlarda yeniden kullanin.

pnpm add @better-og/core next react

Ilk route

Bir OG handler olusturun, fontlari yukleyin ve gorsel olarak render edilecek component'i dondurun.

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 ekle

withOgRewrite ekleyerek platform, layout ve aspect_ratio degerlerini otomatik yazdirin.

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 ayari

Node'da Takumi kullaniyorsaniz paketi Next.js tarafinda external olarak tutun.

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