Next.js with Cardsmith
The editor opens with a blog card and the Next.js snippet. Design the card once, then generateMetadata builds one image URL per page with the title as a query parameter, so every post shares a correct preview without any image code in your app.
- Change the colours, layout and site name, and save the template.
- Copy the Next.js snippet into the generateMetadata function of your post route.
- Deploy and paste a post URL into a link-preview checker to see the card.
- Change the design any time; every page picks up the new look without a redeploy.
What to know
next/og and @vercel/og render images inside your own deployment. That works, but it means JSX with a subset of CSS, fonts loaded by hand, an edge or Node runtime for the route, and a cold start on the first share. A hosted template moves all of that out of the app: the page only builds a URL.
The URL is the whole integration. title, subtitle, label and site can each be passed as query parameters and are drawn onto your saved design. Next.js puts the absolute URL in og:image and twitter:image, so it works with static export as well as server rendering.
Images are 1200x630 PNG, the size Facebook, LinkedIn, X and Slack all expect, and are cached by the CDN for 30 days, so a post that goes viral does not render the same card thousands of times. Encode titles with encodeURIComponent so quotes and ampersands survive.
Updated · Cosmovex
Questions
Does this work with the App Router and the Pages Router?
Yes. In the App Router use generateMetadata; in the Pages Router put the same URL in an og:image meta tag with next/head.
Do I need to install anything?
No package and no runtime. The image is a URL on tools.cosmovexapps.com.
Can I use custom fonts?
Cards are drawn with Inter. Layout, colours and text are yours to change.
Is Cardsmith free?
Yes: one template and 100 renders a day, with a small Cardsmith badge on the card. Pro removes the badge and allows 20 templates and 10,000 renders a day.
The free plan covers everything on this page. Cardsmith Pro ($9/mo, billed monthly) is described on the Cardsmith page.
