For a blog-wide cover, add a prepared image such as opengraph-image.jpg to the relevant App Router directory. For a unique cover per post, add app/blog/[slug]/opengraph-image.tsx, load the post for that slug, and return a Next.js ImageResponse. Next.js turns either file convention into the route’s Open Graph metadata.
Choose a static image or generate one per post
| Approach | Use it when | What it does |
|---|---|---|
| Static file | A prepared cover is suitable for every page in a route segment, or you already have an individual image file. | Place a supported image file such as opengraph-image.jpg in the relevant App Router directory. A more specific file in a deeper route directory takes precedence over a higher-level image. |
| Generated route | Each post should display its own title, category, author, or other post data in a consistent design. | Put opengraph-image.tsx under the dynamic route, load the post data, and render the image with ImageResponse. |
For the official App Router workflow, Next.js documents both metadata image files and programmatic image generation. Its guide, updated February 27, 2026, uses app/blog/[slug]/opengraph-image.tsx for post-specific images: Next.js dynamic image generation and the opengraph-image file convention.
Generate a cover from a post’s data
1. Put the image route under the dynamic post route
For a blog whose URLs look like /blog/my-first-post, use this structure:
app/
blog/
[slug]/
opengraph-image.tsxThe file convention connects the generated image to each post route. The route can read the slug, retrieve that post, and use its fields to create an image. Adapt the route parameter type and data-loading code to your installed Next.js version and project.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
2. Load the post and return an ImageResponse
This example assumes the project has a getPost(slug) function that returns a post with a title, or null if it does not exist. Replace that function with your database or content API. The rendered layout uses flexbox and inline styles rather than unsupported browser layout features.
import { ImageResponse } from 'next/og'
import { getPost } from '@/lib/posts'
export const size = {
width: 1200,
height: 630,
}
export const contentType = 'image/png'
export default async function OpenGraphImage({
params,
}: {
params: Promise<{ slug: string }>
}) {
const { slug } = await params
const post = await getPost(slug)
if (!post) {
throw new Error(`Post not found: ${slug}`)
}
return new ImageResponse(
(
<div
style={{
width: '100%',
height: '100%',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
padding: '72px',
background: '#101827',
color: '#ffffff',
fontSize: 64,
fontWeight: 700,
lineHeight: 1.15,
}}
>
<div style={{ display: 'flex', color: '#a5b4fc', fontSize: 24 }}>
IT Guides
</div>
<div style={{ display: 'flex', marginTop: 24 }}>
{post.title}
</div>
</div>
),
{
...size,
},
)
}The example uses the params type shown for current Next.js versions; parameter typing has varied between releases. If your installed version types route parameters differently, follow that version’s route convention. The documented example dimensions are 1200 by 630 pixels, and this route exports a PNG content type. That is an implementation example, not a claim that every social platform requires those dimensions.
3. Keep the design within ImageResponse’s CSS support
ImageResponse converts a JSX tree into an image through the @vercel/og, Satori, and resvg pipeline. It supports common properties including flexbox, absolute positioning, custom fonts, text wrapping, and nested images, but it is not a full browser rendering engine. In particular, Next.js warns that CSS Grid is not supported. Check the official ImageResponse API reference for supported features and constraints before building a more elaborate composition. The cited API reference is for Next.js 15; match details to the version installed in your project.
4. Confirm metadata and the actual output
The file convention generates the relevant head tags for you. The image route can also export metadata such as alt, size, and contentType, as documented for the convention. Inspect the generated image in your app and verify the page’s rendered metadata rather than assuming a successful TypeScript build guarantees the intended social preview.
Rank #3
Decide how fresh generated covers should be
Generated Open Graph images are statically optimized and cached by default. They are not necessarily regenerated on every request. A Dynamic API, uncached data, or route configuration can change whether generation is static or dynamic; review how the post data is fetched and how the route is configured if an edited title must appear promptly. Next.js explains this behavior in its metadata image convention documentation.
- If post content is known at build time and changes are deployed with the site, the default static behavior may fit.
- If content changes independently of builds, decide how the image route should be revalidated or made dynamic using the caching and rendering mechanisms appropriate to your Next.js version.
- Do not assume every request reads the latest post data: check the route’s output after a content update.
Use the right Next.js feature for the job
next/image is for images displayed in page content, including image optimization and delivery features. It is adjacent to, but not the API for, generating a social cover. Use the App Router’s opengraph-image convention and ImageResponse for generated Open Graph images. See the Next.js image optimization guide for the separate page-image feature.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Troubleshoot common problems
- The image is missing from the page metadata: Check that the file is named
opengraph-imagewith a supported extension and is in the intended route directory. For generated images, confirm the file sits under the correct dynamic segment and that the page is being served by the App Router convention. - A parent cover appears instead of the post cover: Inspect the route tree for a more specific image file, since deeper route files take precedence over higher-level ones. Confirm the dynamic image route corresponds to the URL you are testing.
- Text, spacing, or layout renders incorrectly: Simplify the JSX and styles to the documented CSS subset. Replace CSS Grid or other unsupported browser-dependent styling with flexbox, then inspect the produced image.
- A title change does not show up: Static optimization and caching may preserve a generated image. Check whether the route uses cached data or static behavior, and adjust freshness or route configuration for your installed version.
- The route fails for one post: Confirm the slug resolves to a post and that the data function handles missing records. A missing post should be handled deliberately rather than passed into the renderer as undefined data.
- The code’s parameter type does not compile: Route parameter typings differ across Next.js versions. Use the type and signature expected by the version in the project rather than copying an example from a different release unchanged.
Or skip the browser setup
If you need a screenshot of a page rather than a code-generated social cover, ScreenshotNeo can return an image or PDF from one GET request. It is a website screenshot API and MCP server from Yorker Media; it is not a replacement for Next.js metadata image generation.
cURL, saving a WebP response:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);See the ScreenshotNeo API documentation for request options. Before capture, it accepts cookie or consent banners like a visitor and removes 60+ known consent platforms, newsletter popups, and chat widgets; those steps can be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, with response headers indicating the page verdict and whether the request was billed. Its MCP server offers take_screenshot, get_page_info, and capture_pdf for AI agents. The free plan includes 1,000 shots a month with no card; paid plans start at $5 for 3,000 shots. Sign up for ScreenshotNeo.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteFrequently Asked Questions
Can one Next.js blog route use a shared cover while individual posts have their own?
Yes. Put a shared image at the blog segment and add more-specific image files beneath routes that need different covers; deeper route files take precedence.
Does ImageResponse render a complete browser page?
No. It renders JSX with a supported subset of CSS, so browser-only layouts and unsupported properties may not match.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
