nextjs-og-image-css-limitations

Your Next.js OG image build fails during prerendering because the Satori rendering engine restricts CSS display values. Replacing unsupported values like inline-block with display:flex resolves this prerendering error.

To fix CSS display errors in Next.js ImageResponse, replace any inline-block display values with display:flex. Add alignSelf:flex-start to prevent the element from stretching to full width.

Next.js OG image generation supports a limited CSS subset via Satori, primarily display:flex. Using unsupported properties like inline-block causes prerender failures, so valid flexbox alternatives are required.

No, you cannot use inline-block CSS in Next.js server component OG images because Satori restricts display values. You must use display:flex and alignSelf:flex-start to replicate inline-block behavior without errors.

To prevent full-width stretching when fixing Next.js OG image CSS, apply alignSelf:flex-start to your elements. This works with the required display:flex replacement to maintain proper element dimensions.

Yes, you need to test your Next.js OG image route after updating CSS display values. Run the Next.js build and visit the OG image route to verify that the Satori prerendering errors are fully resolved.