Πώς δημιουργείτε δυναμικές εικόνες Open Graph στο Next.js;

Question

Accepted Answer

Το Next.js μπορεί να **δημιουργήσει εικόνες κοινής χρήσης στα μέσα κοινωνικής δικτύωσης (Open Graph) αμέσως** χρησιμοποιώντας το `ImageResponse` API — απόδοση JSX/CSS σε PNG στο edge. Αυτό δίνει σε κάθε σελίδα μια προσαρμοσμένη προεπισκόπηση κοινής χρήσης χωρίς να σχεδιάζετε εικόνες με το χέρι. ## Μια διαδρομή εικόνας 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` (το API `next/og`) μετατρέπει JSX+CSS σε εικόνες κοινής χρήσης κατά το χρόνο αιτήματος, ώστε κάθε δυναμική σελίδα να μπορεί να έχει μια προσαρμοσμένη προεπισκόπηση OG χωρίς έναν σωλήνα σχεδιασμού. Σε συνδυασμό με τη σύμβαση `opengraph-image.tsx`, δημιουργεί πλούσιες, αντιμετωπίστε με δεδομένα κοινωνικές προεπισκοπήσεις — ένας πραγματικός οδηγός κλικ συνδέσμων — ένα ενσωματωμένο, χαμηλής προσπάθειας χαρακτηριστικό αντί για μια ручное εργασία.