Créer des images dynamiques Open Graph avec Next.js

Beely 3h

16 août 2022

•Updated on 21 mars 2025

In this post, I want to show you how to generate dynamic Open graph images with Next.js

Je suis sûr que vous avez entendu parler des images Open graph qui sont des images affichées sur les médias sociaux pour le site Web ou l'article de blog

A visual depiction of what is being written about

Dans ce billet, je veux vous montrer comment générer des images dynamiques Open graph avec Next.js en quelques étapes seulement.

Pour générer les images, nous utiliserons la bibliothèque next-api-og-image et les routes de l'API Nextjs.

Vous êtes peut-être familier avec la bibliothèque officielle qui gère les images Open graph par nextJS - https://github.com/vercel/og-image. next-api-og-image fait à peu près la même chose mais elle est plug-and-play sans aucune configuration.

Dans la documentation, nous pouvons trouver l' exemple d'une image OG avec le support de React.

javascript 
import { withOGImage } from 'next-api-og-image'

export default withOGImage({
  template: {
    react: ({ myQueryParam }) => <div>🔥 {myQueryParam}</div>,
  },
})

Dans mon cas, j'ai ajouté le support pour un tailwind et j'ai fait ce modèle de base avec la date et le titre du blog pour rendre l'image OG comme vous pouvez le voir ci-dessous.

pages/api/og-image.js 
import { withOGImage } from 'next-api-og-image';

export default withOGImage({
  template: {
    react: ({ title, date }) => (
      <html>
        <div
          dangerouslySetInnerHTML={{
            __html: `<head>
          <script src="https://cdn.tailwindcss.com"></script>
        </head>`
          }}
        />
        <div className="w-[1200px] h-[630px] border flex items-center justify-center p-16">
          <div className="flex flex-col items-center justify-center text-center">
            <div className="text-2xl">
              <div className="">{date}</div>
            </div>
            <div className="mt-4 mb-8 font-extrabold text-7xl leading-[80px] text-center">
              {title}
            </div>
          </div>
        </div>
      </html>
    )
  }
});

Ce que nous devons faire ensuite, c'est créer un point de terminaison API qui résout l'image OG pour nous.

La route pour l'API est `/api/og-image` avec le titre et la date comme paramètres. Une fois que nous avons l'imageUrl, nous pouvons l'utiliser dans <Head />.

Head.tsx 
import siteData from 'data/siteData';
import Head from 'next/head';



export function MetaHead(props) {
const { publishedOn, title } = props
const imageUrl = `https://www.phung.io/api/og-image?title=${encodeURIComponent(
    title
  )}&date=${encodeURIComponent(publishedOn)}`;

  return (
    <Head>
      <title>{titleName}</title>
      <meta content={description} name="description" />
      <meta property="og:image" content={imageUrl} />
    </Head>
  );
}

Et voici le résultat 🎉

Pour vérifier l'image OG, vous pouvez utiliser https://www.opengraph.xyz/ ou vérifier directement l'image OG pour cet article.