Next.js இல் இயங்கும் Open Graph படங்களை எவ்வாறு உருவாக்குகிறீர்கள்?

Question

IT Interview Practice · Accepted Answer

Next.js ஆனது `ImageResponse` API ஐப் பயன்படுத்தி **சமூக-பகிர்வு (Open Graph) படங்களை இயக்கத்தில் உருவாக்க** முடியும் — JSX/CSS ஐ விளிம்பில் 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` என்ற சிறப்பு கோப்பு பெயர் தானாக பக்கத்தின் மெட்டாடேட்டாவுடன் கோப்பிடப்பட்டுள்ளது, எனவே `` இந்த உருவாக்கப்பட்ட 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` மாநாடுடன் இணைந்து, இது பணக்கார, தரவு-உலாவும் சமூக முன்னோட்டங்கள் — ஒரு உண்மையான இணைப்பு-கிளிக்-முடிவுவழி இயக்கி — ஒரு உள்ளமைக்கப்பட்ட, குறைந்த-முயற்சி அம்சமாக மாறுவதற்கு பதிலாக கைப்பட வேலை செய்கிறது.

ஒரு கோப்பு-அடிப்படையிலான OG படத்திற்கான வழி

இது எவ்வாறு இயங்குகிறது

புரோகிராமிங் உருவாக்கம் (যেக்கோனாயினும் வழி)

இயங்கும் OG படங்கள் ஏன் முக்கியமானவை

ஏன் இது முக்கியம்

தொடர்புடைய கேள்விகள்