-
-
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
Inspecting the DEV.to code (with Chrome Developer Tools, or the source code available on GitHub) I've seen a specific function to generate the post featured image. Adapt it to a JavaScript stack like the one on my blog (NextJS) it doesn't seems a problem. The basic functionality to achieve is the next one: get an URL where, if you make a GET query, it returns us an image with the post title you want to share, the blog's name, my personal image and the publish date. To achieve all of this, I decide to use the native NextJS serverless functions, as they adapt it perfectly to cases like this one. The only thing I have to do to create a serverless function in NextJS is to create a JavaScript function inside the /pages/api/ folder, in order to notify NextJS that this one is a serverless function (or Lambda in Amazon Web Services). With this function, we can get different results than with NextJS pages or React components. Also, the function will have as param the post slug, to know which post we need to return the featured image. The basic aproach is the next one:
At last, I reached a Vercel GitHub issue, where other users commented exactly the same problem. The solution? Move the function from /pages/api/ to /api/ on the project root folder. That change makes that the NextJS serverless functions, become Vercel serverless functions. And with this change, the Deploy now was possible. The only change to do, besides that, was start my local development environment with vercel dev instead of next dev.
On the public repo of my blog you can find the example of the finished code, or you can look at the link of my first post thumbnail. I also give you a basic CodePen with a layout sample of the final image style. You can edit it to get your desire thumbnail visual style and use it on the serverless function. The layout we'll be the same after being parsed with the headless Chrome.