Integration Guide

Next.js + ShotLayer: OG Images in 5 Minutes

Generate dynamic Open Graph images for every page in your Next.js app using ShotLayer's API. No Satori, no build-time rendering -- just one API call per page.

Add your API key

Store your ShotLayer API key as an environment variable. Create or edit your .env.local file in the project root:

.env.local

SHOTLAYER_API_KEY=your_api_key_here

Tip

Get a free API key instantly at shotlayer.dev -- no credit card required.

Create the OG image route

Create a dynamic API route that generates OG images on demand using ShotLayer. This route receives a blog post slug and returns a PNG image.

app/api/og/[slug]/route.ts

import { NextRequest, NextResponse } from 'next/server';

export async function GET(
  request: NextRequest,
  { params }: { params: { slug: string } }
) {
  const post = await getPostBySlug(params.slug);

  if (!post)
    return NextResponse.json(
      { error: 'Not found' }, { status: 404 }
    );

  const response = await fetch('https://api.shotlayer.dev/v1/og', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${process.env.SHOTLAYER_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      title: post.title,
      subtitle: `${post.author} · ${new Date(post.date).toLocaleDateString()}`,
      template: 'blog-post',
      backgroundColor: '#0f172a',
      textColor: '#f8fafc',
    }),
  });

  if (!response.ok)
    return NextResponse.json(
      { error: 'OG generation failed' }, { status: 500 }
    );

  return new NextResponse(response.body, {
    headers: {
      'Content-Type': 'image/png',
      'Cache-Control': 'public, max-age=86400, s-maxage=86400',
    },
  });
}

Wire up metadata

Use Next.js generateMetadata to add the OG image to every blog post page automatically.

app/blog/[slug]/page.tsx

import { Metadata } from 'next';

export async function generateMetadata({
  params,
}: {
  params: { slug: string };
}): Promise<Metadata> {
  const post = await getPostBySlug(params.slug);

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [
        {
          url: `/api/og/${params.slug}`,
          width: 1200,
          height: 630,
        },
      ],
    },
  };
}

Deploy

That's it. Deploy to Vercel as usual. OG images are generated on the first request and cached for 24 hours via the Cache-Control header. No build step, no static generation -- every new post gets a unique OG image automatically.

How it works

When a social platform (Twitter, Slack, Discord) crawls your page, it finds the /api/og/[slug] URL in the meta tags. That route calls ShotLayer, which renders and returns a PNG. Subsequent requests are served from cache.

Ready to add OG images to your Next.js app?

Get a free API key and start generating images in minutes.

Get API Key Free →

More integration guides

Vercel Edge Functions Low-latency screenshots at the edge Cloudflare Workers Screenshots without Puppeteer Supabase Edge Functions Screenshots for your Supabase app