Generated Open Graph images

NextGuide can generate a social-sharing preview for each documentation page. The image uses your site's name, the page's title and description, and the same NextGuide logo and theme colors as the official documentation.

These previews are intended for link sharing on Discord, Slack, LinkedIn and other platforms that read Open Graph metadata. They are not screenshots of the documentation page.

Available support

• App Router / Developer Mode: generated app/og/[...slug]/route.ts image handler per MDX slug, with a PNG built during static export or served by Next.js.
• The official NextGuide documentation: one image for the homepage and individually generated images for the documentation and components sections.
• Pages Router: the reusable image renderer is available from nextguide/og, but an automatic per-page generated image route for static exports is not yet included.
• Account Mode: a source preview is under development, but its generated image behavior is not yet validated for production and is not available in the published alpha.

Customize the image

Use the package's built-in server-safe image card component with the Next.js opengraph-image.tsx file convention. It reads the official NextGuide logo mark; your site name, title, and accent are supplied separately.

import { NextGuideOgCard } from "nextguide/og"
import { ImageResponse } from "next/og"

export const size = { width: 1200, height: 630 }
export const contentType = "image/png"
export const alt = "Project documentation"

export default function Image() {
  return new ImageResponse(
    <NextGuideOgCard
      siteName="My Documentation"
      title="Getting started"
      description="Create your first documentation page"
      section="Documentation"
      appearance="dark"
      accent="blue"
    />,
    size,
  )
}

The automatically generated App Router template obtains the information from the MDX frontmatter, so you normally do not need to write this manually.

Hosting and indexing

The generated image route is static whenever its paths and content are available at build time. It works with Next.js static exports, including GitHub Pages, without a separate screenshot service.

Share previews use an image URL resolved from site metadata; set site.url to your public domain, including a base path when needed. Configure a publicly accessible domain for your Next.js deployment. Generated images also require Next.js to produce an og:image metadata tag on each page.

This feature uses Next.js's built-in ImageResponse API; it does not introduce another npm package.