مقدمة
توليد صور Open Graph واعية بالمنصة مع تخطيط متكيف وخطوط متعددة اللغات.
نظرة عامة
better-og مجموعة أدوات لإنشاء صور Open Graph تتغير أبعادها وتخطيطها تلقائيًا حسب المنصة التي تطلب الصورة.
- كشف المنصة عبر الإشارات الفعلية للطلب.
- نسب أبعاد ومناطق آمنة جاهزة للاستخدام.
- محولات لـ Next.js و Workers و TanStack Start.
التثبيت
ثبّت فقط الحزم المرتبطة بالبيئة التي تعمل عليها، ثم أعد استخدام نفس المكون عبر جميع البيئات.
pnpm add @better-og/core next reactأول مسار
أنشئ معالج OG، وحمّل الخطوط، ثم مرّر المكون الذي يجب عرضه للصورة النهائية.
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 تلقائيًا.
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، فأبقِ الحزمة خارجية في إعدادات Next.js.
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
serverExternalPackages: ["@takumi-rs/image-response"],
};
export default nextConfig;Edit on GitHub
Last updated on