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.

परिचय

adaptive layout और multilingual fonts के साथ platform-aware Open Graph rendering.

ओवरव्यू

better-og एक toolkit है जो image मांगने वाली platform के हिसाब से OG image का size और layout अपने आप बदल देता है।

request signals से platform detection.
ready-to-use aspect ratios और safe areas.
Next.js, Workers और TanStack Start के लिए adapters.

इंस्टॉलेशन

सिर्फ वही packages install करें जो आपके target runtime के लिए जरूरी हों, और वही OG component हर जगह reuse करें।

pnpm add @better-og/core next react

पहला route

OG handler बनाएं, fonts load करें, और उस component को लौटाएं जिसे image के रूप में render करना है।

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,
});

प्रॉक्सी जोड़ें

withOgRewrite जोड़ें ताकि platform, layout और aspect_ratio अपने आप request में आ जाएं।

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 कॉन्फ़िग

अगर Node पर Takumi इस्तेमाल कर रहे हैं, तो Next.js config में package को external रखें।

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