What's Next(.js)? - Prologue

Hi everyone! 🙋🏻‍♀️

Welcome to What's Next(.js)? the series! The goal is to learn and be able to build web applications with Next.js and other front-end technologies. It is my first ever series (and blog post), so wish me luck, and any comments or inputs are deeply appreciated ✨. Well, let's start!

How It All Started

It all started as I want to make my own Open Graph image generator that can also function as a cover image creator. A cover image is like an album cover or a movie poster which acts as an attention grabber for the audience to a blog post. An attractive cover image will work wonders towards your post views. And most of the time, posts with a cover image will perform better than those with none. I want to start blogging, and making this side project might help me (maybe also others) in the future.

Back Story

I never use Next.js before, but always been hearing good things about it. So, I thought, why not? Well, it's about time to cross one out of my piling 📚 Technical Bucket List 📚. Then, when I was reading Next.js documentation, I was really excited to see that they provide a way to build our API within Next.js.

What to Get Excited About Next.js API Routes?

First of all, API routes are server-side codes! This means they are server-side only bundles, won't increase client-side bundle size, and run on Node.js. We don't need to create another server for our API, we can instead utilize the one that serves our Next.js web application. It's like writing a Node.js web server that hosts a React application, but without all the hassles! 🤩 The routing system is the same as Next.js pages, it uses a file-system-based router, in which each file is treated as an API endpoint.

Read more about Next.js API routes' routing system here.

Is It Possible to Use SVG as Cover Image or OG Image?

The answer is no. You might ask, "Then why are we doing this?". I'll answer this a bit later on, but one of the reasons is simply because this was the first idea of mine. I didn't do my research, but I still want to be fully transparent and record my learning process. 🧐

Why SVG?

Because it's the first thing that popped into my mind that renders text while still being an image. Inside an SVG we can add texts, shapes, images, gradients, styles, and even an HTML (using foreignObject)! This kind of flexibility really helps in making generated images. Just like the cover image of this post. 👏🏼

Challenges

I honestly thought I'd succeeded then I realized that we couldn't use SVG. So, I tried converting the SVG file in Node.js environment into a PNG file. It works! But, there is a but. I used foreignObject inside the SVG to render HTML code, and it didn't make it to the converted PNG image. It's because foreignObject needs a browser context to be able to work. We could remove foreignObject and try to do text alignment and overflow manually with tspan (MDN), but this affects the flexibility.

Therefore, 🥁🥁🥁

New Plan

I decided to turn this whole journey into a series, which will include, but is not limited to:

• a simple Next.js app and API route that generates SVG image (coming really soon!)
• implement a simple form to customize the image
• render the image with HTML and use Puppeteer to capture it
• implement a simple editor to allow more customization.

I ended up choosing Puppeteer and capture the web page, which is pretty far from what I initially wanted. Puppeteer needs more time and memory than I prefer. I can generate an image, download it, and then use it as a cover image. But, I want to create an API (with Next.js API routes) that functions as Open Graph Image as a Service. I later found out that Vercel already made this 🥲, still, I want to create my own.

What's Next?

Just like the series name What's Next(.js)? 😉, I will embark on my journey to the Next.js world. I'll also continue working on this side project in the hope of creating a simple yet powerful OG Image generator. See you on the next post!

P.S. You're very welcome to leave your thoughts, comments, or opinions!