Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesIn a Next.js App Router blog, create a route-specific opengraph-image.tsx alongside the dynamic post route, fetch that post’s data, and return an ImageResponse that renders its title and branding. Next.js then supplies the generated image as that route’s Open Graph image metadata. This approach gives each post a distinct preview without manually designing a separate image file.
Generate one Open Graph image per blog post
For a blog route such as /blog/[slug], place an opengraph-image.tsx file in the same route segment: app/blog/[slug]/opengraph-image.tsx. Resolve the slug, load the matching post, and use its data in an image template returned as ImageResponse from next/og. The route convention connects the generated image to the post’s metadata.
As an Amazon Associate I earn from qualifying purchases.
The following implementation shape is adapted from Next.js’s Open Graph image documentation. The data import is illustrative: adapt it to your project’s data layer and installed Next.js version.
import { ImageResponse } from 'next/og'
import { getPost } from '@/app/lib/data'
export const size = { width: 1200, height: 630 }
export const contentType = 'image/png'
export default async function Image({ params }) {
const { slug } = await params
const post = await getPost(slug)
return new ImageResponse(
<div style={{
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
background: 'white',
fontSize: 72,
}}>
{post.title}
</div>
)
}The code shows the route’s essential flow, not a tested drop-in for every Next.js release. In particular, follow the parameter typing and data-fetching conventions used by your installed version. The official example declares a 1200 × 630 PNG; treat those as the example’s settings, not a universal size requirement for every social network.
#1 Best Overall
Make the card recognizable and legible
Render the post title alongside any consistent visual identity you want, such as a site name or brand mark. Keep the title prominent and design for wrapping: long headings need room, while very short ones should not leave the layout looking accidental. Next.js documents support for common CSS properties, custom fonts, text wrapping, centering, and nested images, but the image renderer does not implement all browser CSS.
Work within the image renderer’s CSS support
ImageResponse uses @vercel/og, Satori, and resvg to turn JSX and supported CSS into a PNG. Flexbox is supported; CSS Grid is not. Build the layout from supported primitives, then inspect the generated output rather than assuming a design that works in a browser will render identically here.
Rank #2
- Use flexbox for alignment and layout instead of CSS Grid.
- Check how long and short titles wrap at the chosen font size.
- Verify custom fonts and nested image assets in the generated image.
- Use the route’s actual output to catch clipping or spacing problems before sharing posts.
Choose generated routes or static images
A generated route is appropriate when the card needs data unique to each post. A static image is simpler when every page in a route segment should use the same preview. Next.js supports both approaches, and they can coexist at different route levels: a more-specific image file takes precedence over a parent-level image.
| Approach | Use it when | What to know |
|---|---|---|
Generated opengraph-image.tsx |
Each post needs an image built from its own data. | Return an ImageResponse from the route convention. The generated image route is cached by default unless dynamic behavior is configured. |
Static opengraph-image.jpg or another supported image file |
The same preview should serve pages in a route segment. | A deeper, more-specific route asset takes precedence over a parent-level one. |
Next.js’s file-based conventions list JPG, JPEG, PNG, and GIF for static Open Graph image files. The documentation specifies maximum file sizes of 8 MB for Open Graph image files and 5 MB for Twitter image files; exceeding the documented limit causes the build to fail. These are Next.js convention limits, not a guarantee that every platform will fetch files of those sizes.
Rank #3
Keep post updates and image caching in sync
Next.js statically optimizes generated images by default unless they use Dynamic APIs or uncached data. The generated-image files are special route handlers and are cached by default unless dynamic behavior is configured. That means the right setup depends on when the card should reflect a post’s content.
- If the title and image should be fixed from build-time content, a statically optimized result may fit.
- If post data can change after publication and the image should reflect those changes, plan the data-fetching and image-cache behavior together.
- Check the caching rules for the installed Next.js version, and deliberately configure invalidation or regeneration where needed.
Social platforms may retain an image they fetched earlier. The available documentation here does not establish refresh timing for individual crawlers, so do not promise that a changed card will appear immediately everywhere.
Set page metadata separately when needed
Next.js also supports static metadata and data-dependent generateMetadata for page metadata in Server Components, generating relevant head tags. Use those APIs for page-level metadata and the route image convention for the image itself. A static image at a parent route can provide a default while a more-specific generated image serves individual posts.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, 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 minuteTroubleshoot common implementation problems
- The image shows the wrong post or no title: confirm that the route parameter resolves to the intended slug and that the data lookup returns that post. Adapt the parameter handling to the project’s Next.js version.
- The layout differs from the browser design: check for unsupported CSS, especially CSS Grid, and rebuild the layout with supported flexbox properties.
- The title is clipped or awkwardly wrapped: test long and short post titles, adjust the font size and available space, and inspect the actual generated image.
- A changed post still has an old card: check whether the image is statically optimized or cached and whether data or route invalidation is configured. A social crawler may also retain a previously fetched image.
- The build fails on a static image asset: check the documented Next.js file-size maximum for the image type and reduce the file size if it exceeds that limit.
Or skip the browser setup
If you need a screenshot of a rendered page rather than an image template generated inside Next.js, ScreenshotNeo offers a one-request screenshot API. For this Open Graph use case, you would first need a page that renders the post-specific card; the API captures a URL rather than replacing the route-based metadata implementation above.
For example, capture a public page containing the finished card:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo documentation for API options. It accepts cookie or consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; those steps can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers identify the page verdict and whether it was billed. Its MCP server includes tools for AI agents to take screenshots, get page information, and capture PDFs. The Free plan includes 1,000 shots a month with no card; paid plans start at $5 for 3,000 shots.
Sign up free for 1,000 screenshots a month with no card.
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.
