Générer l'image OG

floconOgImage() crée l'image d'aperçu social d'une page. Appelez-la dans opengraph-image.tsx. Elle vient de @flocon-ai/next.

L'image utilise seulement le titre SEO et la description de la page. Elle utilise vos couleurs : primary, background et foreground.

opengraph-image.tsx

Créez opengraph-image.tsx à côté de la route qui affiche vos pages Flocon AI :

import {
floconOgImage,
floconOgImageSize,
floconOgImageContentType,
} from "@flocon-ai/next"

export const size = floconOgImageSize
export const contentType = floconOgImageContentType

export default async function Image() {
return floconOgImage({
  locale: "en",
  path: "guides/seo",
  cssPath: "src/app/globals.css",
})
}

Les exports :

• floconOgImage(options) : renvoie l'image.
• floconOgImageSize : 1200 x 630.
• floconOgImageContentType : image/png.

Remplacez locale et path par la page de la route. Dans une route dynamique, lisez-les dans les paramètres de la route.

Options

• locale : la langue de la page, comme en. Obligatoire.
• path : le chemin de la page, sans slash au début, comme guides/seo. Obligatoire.
• cssPath : chemin de votre fichier CSS avec le thème shadcn.
• colors : les couleurs directement. Au choix primary, background, foreground.

Si la page n'existe pas, floconOgImage() lance une erreur.

Choisir vos couleurs

Vous avez deux options. Les deux lisent le hex ou oklch(...).

Depuis votre fichier CSS

Donnez cssPath. La lib lit le premier bloc :root. Il doit contenir ces 3 variables :

• --primary
• --background
• --foreground

S'il en manque une, la lib lance une erreur. Les valeurs oklch(...) sont converties en hex pour vous.

Directement

Donnez colors. Il gagne sur cssPath.

floconOgImage({
locale: "en",
path: "guides/seo",
colors: { primary: "#2563eb", background: "#ffffff" },
})

Une couleur absente vient de cssPath. Sans cssPath, elle vient des couleurs neutres : primary #2563eb, background #ffffff, foreground #111111.

Environnement

Elle tourne côté serveur uniquement. Elle lit votre token read dans FLOCON_TOKEN. next doit être installé dans votre projet.

Mis à jour 31 octobre 2026