Hello World: Building My Blog with Next.js 15 and Cloudflare

Next.jsCloudflareMDXBlog
5 min read
Updated December 14, 2025
Gautham Vijayan

Gautham Vijayan

Lead Engineer specializing in React Native

Introduction

After 6 long years of putting it off, I've finally built a personal blog! This has been on my to-do list for what feels like forever, but I kept getting caught up in work projects and building things for others. Today, that changes.

Hello World blog header showcasing Next.js 15 and Cloudflare Workers

Image generated with my custom OG image generator hosted on Cloudflare Workers using workers-og

Why Now?

You might be wondering: "Why wait 6 years?" Great question! As a developer who's been deep in the React Native ecosystem, I've been so focused on building mobile apps and npm packages that I never took the time to document my journey.

But here's the thing, sharing knowledge is just as important as building. I've learned so much from other developers' blogs, and it's time I give back to the community that's helped me grow.

The Tech Stack

I chose to host my Next JS powered portfolio website on Cloudflare workers with help of OpenNext Framework maintained by the cloudflare team.

OpenNext Framework

Instead of using traditional hosting, I'm leveraging OpenNext to deploy Next.js on Cloudflare Workers. This gives me:

  • Edge deployment: Content served from 300+ locations worldwide
  • Zero cold starts: Unlike traditional serverless functions
  • Cost-effective: Cloudflare's generous free tier
  • Seamless DX: Deploy with a single command

Using Cloudflare Services

Speaking of Cloudflare, I'm all-in on their ecosystem:

  • Workers: Running my API endpoints and backend logic
  • KV: Caching YouTube videos and NPM package data
  • R2: Storing images and assets

The edge-first approach means my blog loads incredibly fast anywhere in the world. No more waiting for requests to bounce back from a single region!

Custom OG Image Generator

One of my favorite features is the custom Open Graph image generator. Instead of creating static images for every blog post, I built a dynamic generator using workers-og.

Thanks to this wonderful guide: https://code.charliegleason.com/getting-started-cloudflare-workers-image-generation, which helped me host my own OG Image generator API.

// Generate OG images on-the-fly
app.get('/og-image', async (c) => {
  const title = c.req.query('title') || 'Gautham Vijayan'
  
  const html = `
    <div style="/* gradient background styles */">
      <h1>${title}</h1>
    </div>
  `
  
  return new ImageResponse(html, { width: 1200, height: 630 })
})

What to Expect

So what will I be writing about? Here's a sneak peek:

React Native Deep Dives

Expect in-depth tutorials on:

  • Building native modules
  • Performance optimization techniques
  • iOS and Android platform-specific features
  • Publishing npm packages

Full-Stack Development

My expertise spans the full stack:

  1. React.js - Modern web applications with hooks and server components
  2. React Native - Cross-platform mobile development
  3. Cloudflare - Edge computing and serverless
  4. TypeScript - Type-safe development at scale

I'll be sharing real-world patterns, gotchas to avoid, and best practices I've learned over the years.

Conclusion

You can check out the below links

Feel free to:

Have questions or topics you'd like me to cover? Drop a comment or reach out, I'd love to hear from you!

Until next time! 💻✨

Hello World: Building My Blog with Next.js 15 and Cloudflare