Route-aware social preview generation


Next.js can generate route-aware metadata, but your design system still needs reusable visual structure. Pixelixe lets you approve the card design once, then pass route-specific values such as title, author, category, cover image, language, and campaign label into an image generation workflow.



Next.js implementation model

One Pixelixe template, many Next.js route previews

Create the social card in Pixelixe Studio, name the editable layers, save the template, and call Pixelixe from your route handler, build process, CMS webhook, or publishing job. Store the returned image URL and reference it in your Open Graph metadata.

  • Render on publish, during a build job, or from a backend route handler.
  • Map title, subtitle, category, cover image, author, and theme color to named layers.
  • Store the returned image_url next to the slug or CMS record.
  • Use the stored URL in generateMetadata, Open Graph, and Twitter card metadata.

Pixelixe template rendering preview for Next.js Open Graph images

cURL request

curl https://studio.pixelixe.com/api/graphic/automation/v2 \
  -d 'json={
    "document_uid": "nextjs_og_template_uid",
    "api_key": "YOUR_API_KEY",
    "format": "json",
    "image_type": "png",
    "custom_field": "nextjs/docs/routing-guide",
    "modifications": [
      {
        "element_name": "title",
        "type": "text",
        "text": "How to build route-aware previews",
        "font-size": "auto",
        "color": "#0f172a"
      },
      {
        "element_name": "category",
        "type": "text",
        "text": "Engineering"
      },
      {
        "element_name": "cover",
        "type": "image",
        "image_url": "https://example.com/covers/routing.png",
        "width": "cover",
        "height": "cover"
      },
      {
        "element_name": "author",
        "type": "text",
        "text": "Pixelixe Docs"
      }
    ]
  }'

JSON response

{
  "status": "success",
  "custom_field": "nextjs/docs/routing-guide",
  "image_url": "https://studio.pixelixe.com/storage/file/.../nextjs-og-image.png"
}
Implementation note: request format: "json" when your Next.js app needs a hosted image URL for openGraph.images and twitter.images. Use format: "image" only when you want your backend to stream or store the raw binary.

Why engineers choose Pixelixe for Next.js OG images


A template-first workflow keeps design logic out of route code while still letting every URL get its own social image.



Template-first previews

Generate og:image cards from approved templates instead of hand-designing previews.

Route-level fields

Update title, subtitle, cover image, category, author, and brand color per route.

Flexible output URLs

Use hosted image URLs or raw image responses depending on your build pipeline.

Consistent social cards

Keep social cards visually consistent across dynamic content.


Next.js route handler example


Keep the Pixelixe API key server-side. Generate or refresh the card when content changes, then persist the returned image URL for your metadata layer.



API route

// app/api/og-image/route.ts
import { NextResponse } from "next/server";

export async function POST(request: Request) {
  const route = await request.json();

  const payload = {
    document_uid: process.env.PIXELIXE_OG_TEMPLATE_UID,
    api_key: process.env.PIXELIXE_API_KEY,
    format: "json",
    image_type: "png",
    custom_field: route.slug,
    modifications: [
      { element_name: "title", type: "text", text: route.title, "font-size": "auto" },
      { element_name: "category", type: "text", text: route.category },
      { element_name: "cover", type: "image", image_url: route.coverImage, width: "cover", height: "cover" },
      { element_name: "author", type: "text", text: route.author }
    ]
  };

  const body = new URLSearchParams({ json: JSON.stringify(payload) });
  const response = await fetch("https://studio.pixelixe.com/api/graphic/automation/v2", {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body
  });

  const data = await response.json();
  return NextResponse.json({ imageUrl: data.image_url });
}

Metadata wiring

// app/[slug]/page.tsx
export async function generateMetadata({ params }) {
  const page = await getPageBySlug(params.slug);

  return {
    title: page.title,
    openGraph: {
      title: page.title,
      description: page.description,
      images: [{ url: page.ogImageUrl, width: 1200, height: 630 }]
    },
    twitter: {
      card: "summary_large_image",
      images: [page.ogImageUrl]
    }
  };
}
Tip: avoid rendering the same image on every page request. Generate on publish, cache the URL, and refresh it when title, cover, category, author, or theme values change.

How integration works


Use Studio for design approval, then let Next.js or your publishing pipeline own the render loop.



1

Step 1

Design a reusable Open Graph template in Pixelixe Studio.

2

Step 2

Name the template layers, for example title, subtitle, cover, author, and badge.

3

Step 3

Call Pixelixe when content is published or regenerated.

4

Step 4

Save the returned image URL and expose it through Next.js metadata.


Developer FAQ


Can Pixelixe generate Open Graph images for every Next.js route?

Yes. Save the visual template once, then render route-specific cards from structured values such as title, cover image, category, and author.

Should I render at build time or publish time?

For static content, render during publishing or build jobs. For frequently changing content, render from a backend route or queue and cache the returned image URL.

Can the same template support localized pages?

Yes. Pass translated title, subtitle, locale badge, and market-specific imagery while keeping the layout consistent.

Related implementation guides


Use this workflow for blog posts, docs pages, changelogs, product updates, marketplace listings, localized landing pages, and programmatic SEO pages where each URL needs a unique but consistent preview image.



Open Graph Image API

Open the related Pixelixe page for implementation context, API details, or workflow planning.

JSON to Image API

Open the related Pixelixe page for implementation context, API details, or workflow planning.

API hub

Open the related Pixelixe page for implementation context, API details, or workflow planning.

Image Generation API

Open the related Pixelixe page for implementation context, API details, or workflow planning.

Social share image automation

Open the related Pixelixe page for implementation context, API details, or workflow planning.




Ready to generate Open Graph images for Next.js routes?

Start with a reusable Pixelixe social card template, connect the Image Automation API, and attach generated image URLs to your Next.js metadata layer.


Start a 10-day trial
Read the docs