The 200 MB problem that almost broke my company website

Everything started when I faced one of the big fears of all solo developers with low budget - hitting a free tier limit.

That's what happened when I was deploying my company's website in Cloudflare Pages. The maximum file size for a single Cloudflare Pages site asset is 25 MB, while my website's bundle files were larger than that — approximately 200 MB. I chose the Next.js framework for my website, but it generates larger bundle files.

However, there is always a solution for a problem. Instead of deploying larger bundle files, there is a way to optimise them and reduce their size significantly. The solution is back to basics — plain HTML, CSS, and JS, exactly as they were meant to be served — by using the static export feature.

What does it mean in practice? Instead of deploying an app with an unneeded server, Next.js generates static HTML files that can be deployed and hosted on any platform that serves HTML/CSS/JS static assets. Problem solved! You can still use Next.js in Cloudflare Pages without going into bankruptcy!

The fix turned out to be embarrassingly simple. One line in the Next.js configuration file, next.config.js:

// next.config.js

const nextConfig = {
    output: "export", // the gold solution!
    ...
};

Switching to a static export requires additional changes in your application. For instance, if you are using dynamic routes or server actions, you must re-adapt your code to generate the HTML files. This can get painful if your application has hundreds of routes - each one needs static parameters generated manually.

Which brings me to the actual lesson learned: start simple, deploy your application as soon as possible in the deployment platform, and evaluate if you really need a full Next.js application over a static website.

Ship it!