Unajazigeneza sura za Open Graph kwa nguvu katika Next.js?

Question

Accepted Answer

Next.js inaweza **kuzalisha picha za kushiriki kwa kijamii (Open Graph) kwa nguvu** kwa kutumia API ya `ImageResponse` — kwa kukamatia JSX/CSS kuwa PNG kwa makali. Hii inahoi kila ukurasa muhtasari wa kushiriki ulioandaliwa bila kuandaa picha kwa mkono. ## Njia ya picha ya OG inayotegemea faili ```tsx // app/blog/[slug]/opengraph-image.tsx import { ImageResponse } from "next/og"; export const size = { width: 1200, height: 630 }; // standard OG dimensions export const contentType = "image/png"; export default async function OGImage({ params }: { params: { slug: string } }) { const post = await getPost(params.slug); // fetch real data for this page return new ImageResponse( ( // JSX styled with a subset of CSS (flexbox), rendered to an image

{post.title}

{post.author}

), size ); } ``` Jina la faili maalum `opengraph-image.tsx` limeungana kiotomatiki na metadata ya ukurasa, kwa hivyo `` inaonyesha PNG hii iliyozaliwa. Kila chapisho la blogi linakuwa na picha ya kipekee inayoonyesha kichwa na mwandishi wake halisi. ## Jinsi inavyofanya kazi chini ya kila kitu ```text ImageResponse uses Satori → converts JSX + (flexbox) CSS → SVG → PNG. Runs on the Edge runtime → fast generation, cacheable. Supports custom fonts, images, and gradients (a CSS subset, not full CSS). ``` ## Kuzalisha kwa programu (njia yoyote) ```tsx // app/api/og/route.tsx — generate from query params import { ImageResponse } from "next/og"; export function GET(req: Request) { const title = new URL(req.url).searchParams.get("title") ?? "Default"; return new ImageResponse(

{title}

, { width: 1200, height: 630 }); } ``` ## Kwa nini picha za OG za nguvu ni muhimu Picha ya kushiriki inayoshtaki na yenye maalum wa maudhui huongeza kwa kiasi kikubwa kwa kuzaa kwa kushiriki na vibidii vilivyochapishwa kwenye X, LinkedIn, Slack, Discord, n.k. Kuzalisha moja kwa makala/bidhaa kwa mkono sio salama; kuzalisha kutoka kwa data ni otomatiki na kila wakati imesasishwa. ## Kwa nini inakuwa muhimu `ImageResponse` (API ya `next/og`) inabadilisha JSX+CSS kuwa picha za kushiriki wakati wa ombi, kwa hivyo kila ukurasa wa nguvu unaweza kuwa na muhtasari wa OG ulioandaliwa bila mchakato wa kubuni. Pamoja na mkutanismo wa `opengraph-image.tsx`, inafanya muhtasari wa kijamii wenye utajiri na umeme na data — gari halisi la kuzaa kwa kushiriki — sifa iliyojengwa, juhudi duni badala ya kazi ya mkono.