Comment générer des images Open Graph dynamiques dans Next.js?

Question

Accepted Answer

Next.js peut **générer des images de partage social (Open Graph) à la volée** en utilisant l'API `ImageResponse` — en transformant du JSX/CSS en PNG à la périphérie. Cela donne à chaque page un aperçu de partage personnalisé sans concevoir d'images à la main. ## Pourquoi c'est important ```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 ); } ``` Le nom de fichier spécial `opengraph-image.tsx` est automatiquement intégré aux métadonnées de la page, de sorte que la `` pointe vers ce PNG généré. Chaque article de blog obtient une image unique montrant son titre et son auteur réels. ## Comment cela fonctionne sous le capot ```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). ``` ## Génération programmatique (n'importe quelle route) ```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 }); } ``` ## Pourquoi les images OG dynamiques sont importantes Une image de partage attrayante et spécifique au contenu augmente considérablement le taux de clics lorsque des liens sont partagés sur X, LinkedIn, Slack, Discord, etc. Créer manuellement une image par article/produit est impratique ; les générer à partir de données est automatique et toujours à jour. ## Pourquoi c'est important `ImageResponse` (l'API `next/og`) transforme JSX+CSS en images de partage au moment de la requête, de sorte que chaque page dynamique peut avoir un aperçu OG personnalisé sans pipeline de conception. Combinée avec la convention `opengraph-image.tsx`, elle crée des aperçus sociaux riches et basés sur les données — un véritable moteur de clics sur les liens — une fonctionnalité intégrée et facile à mettre en place plutôt qu'une tâche manuelle.