dendrobundle

Track your Next.js bundle size on every commit

Next.js applications accumulate bundle weight in ways that are easy to miss until performance regresses in production. The framework splits output into dozens of route chunks — each one capable of silently pulling in a new dependency through a shared import — and the standard next build output gives you totals per page without telling you which module caused the increase or when it happened. dendrobundle records a snapshot per commit and lets you track the growth curve across branches so a regression shows up in the diff before it ships.

start free — no card try the free analyzer

Set it up for Next.js

The most reliable path across Next.js versions is source-map-explorer run against the built chunks: enable production source maps, then attribute every byte to its module. POST the resulting JSON to dendrobundle with one curl call or the GitHub Action.

# 1. build with source maps (set productionBrowserSourceMaps: true in next.config.js)
next build
npx source-map-explorer --json '.next/static/chunks/*.js' > stats.json

# 2. submit the snapshot
curl -sS "https://dendrobundle.com/api/push?branch=$(git branch --show-current)&commit=$(git rev-parse HEAD)" \
  -H "Authorization: Bearer $DENDROBUNDLE_TOKEN" \
  -H "Content-Type: application/json" \
  -d @stats.json

Full details on the supported formats and CI integration pages.

Next.js bundle tracking — FAQ

Does this work with the App Router?
Yes. The App Router produces the same underlying build output as the Pages Router — the stats capture all route segments, server components, and client boundary chunks. dendrobundle parses them identically regardless of which router you use.
What about Turbopack?
Turbopack does not emit a webpack-compatible stats file today. When you run next build without the experimental Turbopack flag, webpack remains the production bundler and source-map-explorer works normally. If you are testing Turbopack builds, the same source-map-explorer path against the built chunks still applies.
My vendor chunk is huge. Will dendrobundle show me what is inside it?
That is exactly what the module-level treemap is for. Every snapshot includes a hierarchical breakdown by chunk and then by module, so you can see which package and which import path is contributing how many bytes. Click into the treemap, sort the asset table by size, and compare the module list against any previous snapshot.
Do I need to change my build pipeline significantly?
No. The only addition is a stats step after next build and a single curl (or GitHub Action step) to POST the file. There is no SDK to install in your application code and no changes to how Next.js itself is configured.

Start with the Community tier for free — no card required — or drop an existing stats file into dendrobundle.com/analyze to explore the treemap right now without an account.

create a free account