Next.js bundle size tracker

[wereHamster]

One of the questions I usually have when changing code is: How does this change affect the bundle sizes. Mostly as a safeguard to warn me in case an innocent-looking change would lead to excessive changes in the bundle size (which can affect page performance).

When you want to do that, you need a place (some sort of database) that stores these numbers so that you can track them over time and compare (eg. between the main branch and a PR). While there are ways to get by without (eg. by storing the data in the repository itself, or by building the project twice to compare before/after) they are not ideal. Also, having the all historical data available in a database makes it possible to plot the development over a longer period of time, and not just compare two adjacent versions.

I wrote a web service and GitHub Actions integration with a focus on tracking Next.js page bundle sizes. Though it could be used for a lot more use cases (npm package sizes, page load times, lines of code in the project, …), my focus was definitely on Next.js.

The tool, called Niquis, is freely available to all open source projects (mainly because I haven't done that much to secure the API). The guide how to set it up on GitHub Actions is here: https://niquis.notion.site/Niquis-for-Next-js-via-GitHub-Action-ee3496b7abe540018ab54be5e290fbc6.

Use it, give plenty feedback, send me your ideas how I can improve the tool and make it better.

[AlonMiz]

Very cool!
I almost started working on a similar tool. Are you still maintaining this?

[fabn]

This would be very valuable to have tools like this one https://github.com/hashicorp/nextjs-bundle-analysis working with same numbers reported by next.

Next should expose the table it produces in build output as a consumable API. Maybe a simple JSON file in .next with "path": <bytesize>" could be a great start point.