Better OG
Next.js

Next.js (Node)

استخدام better-og مع Next.js على Node.

نظرة عامة

يوفر @better-og/next مسارًا مباشرًا لبناء صور OG داخل Next.js مع دعم للخطوط والوكيل وإعدادات المنصة.

مثال

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

export const runtime = "nodejs";

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,
      }}
    >
      Platform-aware OG
    </div>
  ),
  baseFonts: fontSetup.fonts,
});

ملاحظات

  • المهايئ الافتراضي يستخدم next/og.
  • يمكنك اختيار renderer: "takumi" عند الحاجة.
Edit on GitHub

Last updated on

On this page