Next.js OG Image CSS Limitations

Problem

Next.js next/og ImageResponse uses Satori for rendering, which only supports a subset of CSS. Using unsupported display values like inline-block causes build failures during static generation.

Context / Trigger Conditions

• Build error: Error occurred prerendering page "/opengraph-image"
• Error message: Invalid value for CSS property "display". Allowed values: "flex" | "block" | "none" | "-webkit-box". Received: "inline-block"
• Files affected: opengraph-image.tsx, twitter-image.tsx, or similar OG image routes
• Using next/og ImageResponse component

Solution

Replace inline-block with flex + alignSelf