Generate Images Programmatically on the Edge

Key Takeaways

one of the most frustrating things about building a content-driven site is that if you plan to share it on social media you'll want to have a unique and clickable image that'll show up in link previews for every URL that means someone might have to go into Photoshop or figma and design a unique image luckily now things don't have to be that manual and painful because versel just dropped a new library called OG which stands for Original Gangster and allows you to generate open graph images programmatically on the edge the way it works is very simple you use HTML and CSS to design an image then put that code on a back-end API route that will convert the HTML and CSS to an SVG image on the Fly I'm really excited about this feature because it's a perfect use case for my next JS course in that course we build a website like dev2 where users can create their own blog posts search engine optimization is really important and now thanks to OG we can dynamically create a unique image for every single post without ever touching a design tool or uploading an image to a server somewhere here's how a basic implementation looks I've got an xjs app that uses server-side rendering for a dynamic route called blog this route is pretty typical if you know next JS it grabs the ID query parameter from the URL and then fetches data from somewhere to render the page in this case I'm just simulating a database as a local variable here in the code I'm grabbing data like title and Emoji then passing those props down to the front end what we want to do is use this data in the head of the document with meta tags like OG image the problem is that we don't have an image to use here yet the cool thing about this library is that we can now generate one dynamically I'm creating a URL here that goes to an API route called OG that also contains parameters for title and emoji and now we can move on to the fun part where we implement this API route by creating a file called og.jsx you'll first want to install the package with npm then import image response from versel OG if you run it on the edge you should get an extremely fast response anywhere in the world and versel will automatically cache it after the initial response now inside the Handler function we'll First grab our Dynamic data which in this case will be the title and emoji and then provide default values if they're undefined from there we return an image response which itself returns jsx to define the appearance of the image inside this code you can use inline Styles and it also supports Tailwind as well most importantly you'll notice it has a fixed width and height and the goal here is to create something very simple and clickable that will catch your attention when a link is shared on Twitter Discord or whatever they also created a playground where you can actually edit this code in the browser if you prefer and that's pretty much all there is to it we now have an extremely fast way to generate Dynamic images on the Fly thanks for watching and I will see you in the next one