Hosting Next.js is expensive, right? Not necessarily. I recently explored free hosting options for my Next.js blog and discovered Cloudflare. While Cloudflare offers free hosting for Next.js apps, there are some important trade-offs to consider. Here’s what I learned from my experience.

I tried deploying this exact same blog to Cloudflare Workers. Here’s what I learned from my experience.

My Blog Stack

I’m using Next.js with TypeScript and Tailwind CSS for my blog. Instead of relying on a database, I store my content as files and access them on the server using the fs module.

The Challenges

I now understand why people say hosting a Next.js application isn’t straightforward. There’s a lot of discussion around this topic because deploying Next.js on Cloudflare comes with its own set of limitations. Cloudflare allows you to host Next.js apps either as a Cloudflare Worker or as a static site using Cloudflare Pages. However, there are some important considerations and trade-offs to keep in mind.

1. fs Module is Not Supported in Cloudflare Workers

Since my blog content is stored in files and accessed using the fs module, I ran into issues when deploying to Cloudflare Workers. The fs module isn’t supported in this environment, which forced me to rethink my approach. I ended up moving my content to a JSON file and accessing it from there instead.

2. next/image Doesn’t Work as Expected

I encountered some unexpected behavior with the next/image component. While there were no errors during the build process or when using Wrangler (Cloudflare’s CLI tool), the production environment was downloading original images with file sizes exceeding 1 MB. On average, it took over 10 seconds to load these images.

This happens because next/image relies on advanced optimizations under the hood and that aren’t supported in Cloudflare Workers.

Shocking Discovery: Despite the slow image loading, Google Chrome’s Lighthouse performance score remained at 95. I need to investigate why this is the case and how it’s even possible.

If you’re planning to host a Next.js app on Cloudflare, you’ll need to handle image optimization manually and by using traditional methods like srcset and sizes attributes.

3. Build and Deployment Issues

I’m still learning the ropes, so I faced some challenges during the build and deployment process. Currently, I can only upload and deploy my app from my local terminal using Wrangler. When I tried integrating with GitHub for automatic deployments on changes to the main branch, I ran into similar issues. The same problems occurred when attempting to deploy the app using Cloudflare Pages.

Conclusion

A colleague recommended Cloudflare Workers as a great option for hosting Next.js apps for free. While it’s an impressive platform with many free features, it still lacks the maturity and stability needed for seamless Next.js deployments.

That said, Cloudflare is an excellent choice for hosting basic apps, especially if you’re okay with its limitations. If you’re willing to handle image optimization manually and work around the lack of fs support, Cloudflare can be a solid option for free hosting.

As a beginner, I found this experience both challenging and enlightening. It taught me a lot about the nuances of deploying Next.js apps in non-traditional environments.

---

Helpful Links

1. Can't resolve fs in Cloudflare Worker - Cloudflare Community
2. Next.js in Cloudflare Workers - Cloudflare Docs
3. Next.js in Cloudflare Pages
4. Deploy a NextJS App on Cloudflare Workers - Cloudflare Workers - YouTube Tutorial