ਤੁਸੀਂ Next.js ਵਿੱਚ ਗਤੀਸ਼ੀਲ Open Graph ਚਿੱਤਰ ਕਿਵੇਂ ਤਿਆਰ ਕਰਦੇ ਹੋ?

Question

Accepted Answer

Next.js `ImageResponse` API ਦੀ ਵਰਤੋਂ ਕਰਕੇ **ਸਮਾਜਿਕ-ਸਾਂਝਾ (Open Graph) ਚਿੱਤਰ ਤੁਰੰਤ ਤਿਆਰ ਕਰ ਸਕਦਾ ਹੈ** — JSX/CSS ਨੂੰ edge ਉੱਤੇ PNG ਵਿੱਚ ਰੈਂਡਰ ਕਰਦਾ ਹੋਇਆ। ਇਹ ਹਰੇਕ ਪੰਨੇ ਨੂੰ ਸੰਭਵ ਬਨਾਉਣ ਪਿੱਛੇ ਛੱਡਿਆ ਇੱਕ ਕਸਟਮਾਈਜ਼ ਸਾਂਝੇ ਪੂর্ਵ-ਨਜ਼ਾਰਾ ਪ੍ਰਾਪਤ ਕਰਨ ਦੇਵੇ। ## ਇੱਕ ਫਾਇਲ-ਆਧਾਰਿਤ OG ਚਿੱਤਰ ਰੂਟ ```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 ); } ``` ਵਿਸ਼ੇਸ਼ ਫਾਇਲ ਦਾ ਨਾਮ `opengraph-image.tsx` ਸਵੈਚਲਿਤ ਤੌਰ 'ਤੇ ਪੰਨੇ ਦੇ metadata ਵਿੱਚ ਸਮੇਤ ਹੈ, ਇਸ ਲਈ `` ਇਸ ਤਿਆਰ ਕੀਤੇ PNG ਵੱਲ ਇਸ਼ਾਰਾ ਕਰਦਾ ਹੈ। ਹਰੇਕ ਬਲਾਗ ਪੋਸਟ ਇੱਕ ਵਿਲੱਖਣ ਚਿੱਤਰ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ ਜੋ ਇਸਦਾ ਅਸਲ ਸਿਰਲੇਖ ਅਤੇ ਲੇਖਕ ਦਰਸਾਉਂਦਾ ਹੈ। ## ਇਹ ਅਧੀਨ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ ```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). ``` ## ਪ੍ਰੋਗਰਾਮੈਟਿਕ ਉਤਪਾਦਨ (ਕੋਈ ਵੀ ਰੂਟ) ```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 }); } ``` ## ਗਤੀਸ਼ੀਲ OG ਚਿੱਤਰ ਮਹੱਤਵਪੂਰਨ ਕਿਉਂ ਹਨ ਇੱਕ ਪ੍ਰਭਾਵਸ਼ਾਲੀ, ਸਮਗਰੀ-ਵਿਸ਼ੇਸ਼ ਸਾਂਝਾ ਚਿੱਤਰ ਬਹੁਤ ਹਦ ਤੱਕ ਕਲਿੱਕ-ਥਰੂ ਵਧਾਉਂਦਾ ਹੈ ਜਦੋਂ ਲਿੰਕ X, LinkedIn, Slack, Discord, ਆਦਿ ਉੱਤੇ ਪੋਸਟ ਕੀਤੇ ਜਾਂਦੇ ਹਨ। ਹਰੇਕ ਲੇਖ/ਉਤਪਾਦ ਲਈ ਇੱਕ ਹੱਥ ਨਾਲ ਬਣਾਉਣਾ ਗੈਰ-ਮੁਨਾਸਬ ਹੈ; ਡੇਟਾ ਤੋਂ ਤਿਆਰ ਕਰਨਾ ਸਵੈਚਲਿਤ ਅਤੇ ਹਮੇਸ਼ਾ ਅਪ ਟੂ ਡੇਟ ਹੁੰਦਾ ਹੈ। ## ਮਹੱਤਵਪੂਰਨ ਕਿਉਂ ਹੈ `ImageResponse` (`next/og` API) JSX+CSS ਨੂੰ ਬੇਨਤੀ ਸਮੇਂ ਸਾਂਝੇ ਚਿੱਤਰਾਂ ਵਿੱਚ ਬਦਲ ਦਿੰਦਾ ਹੈ, ਤਾਂ ਜੋ ਹਰੇਕ ਗਤੀਸ਼ੀਲ ਪੰਨਾ ਇੱਕ ਡਿਜ਼ਾਈਨ ਪਾਈਪਲਾਈਨ ਤੋਂ ਬਿਨਾਂ ਇੱਕ ਸੁਧਾਰਿਆ ਹੋਇਆ OG ਪੂਰਵ-ਨਜ਼ਾਰਾ ਹੋ ਸਕੇ। `opengraph-image.tsx` ਸੰਮੇਲਨ ਨਾਲ ਮਿਲਾ ਕੇ, ਇਹ ਅਮੀਰ, ਡੇਟਾ-ਸੰਚਾਲਿਤ ਸਮਾਜਿਕ ਪੂਰਵ-ਨਜ਼ਾਰੇ — ਲਿੰਕ ਕਲਿੱਕ-ਥਰੂ ਦਾ ਇੱਕ ਅਸਲ ਡਰਾਈਵਰ — ਇੱਕ ਅੰਤਰ-ਨਿਰਮਿਤ, ਘੱਟ-ਮਿਹਨਤ ਵਾਲੀ ਵਿਸ਼ੇਸ਼ਤਾ ਬਣਾ ਦਿੰਦਾ ਹੈ ਬਜਾਏ ਇੱਕ ਹੱਥੀ ਕੰਮ ਕਰਦੇ।