Kuinka luot dynaamisia Open Graph -kuvia Next.js:ssä?

Question

Accepted Answer

Next.js voi **luoda sosiaalisen median kuvia (Open Graph) lennosta** käyttämällä `ImageResponse` API:ta — JSX/CSS:n renderöinti PNG:ksi reunalla. Tämä antaa jokaiselle sivulle mukautetun jakoesikatselun ilman kuvia suunnittelua käsin. ## Tiedostoihin perustuva OG-kuvareitit ```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 ); } ``` Erityinen tiedostonimi `opengraph-image.tsx` kytketään automaattisesti sivun metatietoihin, joten `` osoittaa tähän luotuun PNG:iin. Jokainen blogikirjoitus saa ainutlaatuisen kuvan, joka näyttää sen oikean otsikon ja kirjoittajan. ## Kuinka se toimii alla olevalla tasolla ```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). ``` ## Ohjelmallinen luominen (mikä tahansa reitit) ```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 }); } ``` ## Miksi dynaamiset OG-kuvat ovat tärkeitä Houkutteleva, sisältökohtainen jakokuva kasvattaa napsautuskertojen määrää dramaattisesti, kun linkkejä jaetaan X:ssä, LinkedInissä, Slackissa, Discordissa jne. Kunkin artikkelin/tuotteen manuaalinen luominen on epäkäytännöllistä; niiden luominen tiedoista on automaattista ja aina ajan tasalla. ## Miksi sillä on väliä `ImageResponse` (`next/og` API) muuntaa JSX+CSS:n jakokuvik pyynnön ajankohdassa, joten jokainen dynaaminen sivu voi olla mukautettu OG-esikatselu ilman suunnittelutaulusta. Yhdessä `opengraph-image.tsx`-sopimuksen kanssa se luo rikkaita, tietoihin perustuvia sosiaalisen median esikatseluja — todellisia linkkien napsautusten tekijöitä — sisäänrakennettu, matalan vaivannäön ominaisuus manuaalisen tehtävän sijaan.