Extends the view toggle (introduced in the previous PR for compare mode)
to single-build mode as well. The table view lists all sources for the
selected route with sizes and env badges. Internally it reuses
`DiffTable` in `mode="single"` by diffing the build against itself,
which produces an all-`identical` summary — this keeps a single
source-listing implementation regardless of mode.
<!-- NEXT_JS_LLM_PR -->
Co-authored-by: vercel-fleet-prod[bot] <318278635+vercel-fleet-prod[bot]@users.noreply.github.com>
Co-authored-by: Will Binns-Smith <755844+wbinnssmith@users.noreply.github.com>
Adds a table view to compare mode, switchable from the treemap via a
toggle in the top bar. The `DiffTable` lists every source file with its
A/B sizes, delta, and env badges, and supports text search. Removed
sources (which can't appear in the treemap since they don't exist in the
current build) are only visible here.
The view toggle defaults to Table when entering compare mode and resets
to Treemap when leaving it.
<!-- NEXT_JS_LLM_PR -->
Co-authored-by: vercel-fleet-prod[bot] <318278635+vercel-fleet-prod[bot]@users.noreply.github.com>
Co-authored-by: Will Binns-Smith <755844+wbinnssmith@users.noreply.github.com>
Adds a compare mode to the bundle analyzer. When the user picks a
historical snapshot from the new baseline picker in the top bar, the UI
switches into compare mode: routes are diff'd by name and size, and the
per-route view shows a `DiffTreemap` that colors each source tile by its
change status (added/removed/grew/shrank/unchanged).
The compare sidebar shows the import chain for the selected tile on
either the baseline ("A") or current ("B") side. Route totals are
fetched in parallel so the route picker can sort by largest impact and
classify routes as `changed`/`identical` rather than just name-presence.
<!-- NEXT_JS_LLM_PR -->
---------
Co-authored-by: vercel-fleet-prod[bot] <318278635+vercel-fleet-prod[bot]@users.noreply.github.com>
Co-authored-by: Will Binns-Smith <755844+wbinnssmith@users.noreply.github.com>
After each `next experimental-analyze` run, snapshot the output data
into a rolling `history/` directory so later builds can use it as a
comparison baseline.
Each snapshot gets a `metadata.json` with git branch/sha/dirty status,
Next.js version, and route count. A `history/history.json` index
(newest-first, capped at 20 entries) lets the UI list available
baselines without re-reading every snapshot directory. Old snapshots
beyond the cap are pruned automatically.
The client-side `SnapshotMetadata` type mirror lives in
`apps/bundle-analyzer/lib/snapshot.ts` so the compare UI can reference
it without a build-time dependency on the Next.js package.
<!-- NEXT_JS_LLM_PR -->
---------
Co-authored-by: vercel-fleet-prod[bot] <318278635+vercel-fleet-prod[bot]@users.noreply.github.com>
Co-authored-by: Will Binns-Smith <755844+wbinnssmith@users.noreply.github.com>
Reverts vercel/next.js#93071
This breaks our use of lerna, lerna uses npm-package-arg to parse
package.json files and cannot resolve `catalog` references
### What?
Adopt pnpm [catalogs](https://pnpm.io/catalogs) for shared hoisted devDependencies: `typescript`, `jest`, `eslint`, and `prettier`. Each is pinned once in `pnpm-workspace.yaml` and referenced as `"<name>": "catalog:"` by every consumer.
Also adds the missing `dom.iterable` lib to `@next/routing`'s tsconfig, required by `URLSearchParams.entries()` in TypeScript 6.
### Why?
Several packages invoke these binaries in their build, test, or lint scripts but do not declare them in their own `devDependencies` — they rely on the hoisted root install.
This breaks Turborepo's cache invalidation: without a declared dep, a package has no lockfile edge to the tool, so bumping its version (e.g. #91257's TypeScript 5 → 6 upgrade) does not invalidate that package's task hash. `@next/routing`'s `types` task has been a remote-cache hit on canary since the TS 6 bump, even though it now fails locally on a cold cache — CI is replaying a stale pre-bump success.
The same latent hazard exists for `jest` (`@next/codemod`), `eslint` (`@next/bundle-analyzer-ui`), and `prettier` (`create-next-app`).
### How?
- `pnpm-workspace.yaml` defines `catalog:` entries for each tool.
- Consumer packages declare `"<name>": "catalog:"`. pnpm still hoists one copy, but each consumer now has a real lockfile edge to the resolved version.
- Root `package.json` migrates each pin to `"catalog:"` so the workspace file is the single source of truth.
Turborepo needs no changes — its existing per-package hashing picks up lockfile edge changes automatically. Future catalog bumps will invalidate every consumer's cache.
`@types/node` is a deliberate omission from this round: several packages intentionally pin different majors (`^22`, `^20`, `20.14.2`), so migrating it needs per-package intent review rather than bulk conversion.
<!-- NEXT_JS_LLM_PR -->
## What?
Fixes the failure of "test next-swc wasm" on the canary branch. The env
var it sets incorrectly propagated into the build process for the bundle
analyzer.
Example:
https://github.com/vercel/next.js/actions/runs/24352454644/job/71117953939
This makes sure that the env var is set to empty so that it is ignored
for that step specifically.
Ideally we'd figure out a more granular way to set this env var where it
is needed instead, but this unblocks the CI.
This:
- Fetches `data/_app/analyze.data` alongside the current route's data
- Merges `_app` modules into the current route's `AnalyzeData` before
visualization using a `mergeAnalyzeData()`, which merges the two
datasets, reindexing the additional ones and recreating the binary data
format expected by the treemap.
## Test plan
- [x] Add a large dependency (e.g. `moment`) in `pages/_app.tsx`
- [x] Run `next experimental-analyze`
- [x] Open the bundle analyzer and select a pages page
- [x] Verify moment appears in the treemap
- [x] Verify App Router projects (no `_app`) work without errors
This:
- Removes the uncompressed/compressed toggle in favor of just using
compressed sizes when sizing treemap nodes
- Fixes the width of the client/server and file type triggers so that
they don't reflow horizontally when their content changes
Fixes PACK-6295
Fixes PACK-6298
The top bar is getting quite wide with all of its button toggle groups.
This:
- Converts the Compressed/Uncompressed and Client/Server toggles to
shadcn `<Select>`s
- Adds a custom `<MultiSelect>` implementation since this is missing in
shadcn. This composes shadcn’s popovers and a series of checkboxes,
along with accessibility attributes and keyboard shortcuts.
- Uses this `<MultiSelect>` for the type filter
- Removes the divider between these since there aren’t any groups left
to divide
<img width="1547" height="719" alt="image"
src="https://github.com/user-attachments/assets/4041f6b7-2a47-4e17-b020-448ac0103740"
/>
- Adds decorated kbd-style shortcut labels to cue the user into using them
- Listens only for the appropriate OS or Ctrl key on Mac/Others
- Esc now clears and focuses the search field and the treemap focus
- Does not trigger in the case where the user has another element focused
### What?
fix the import chain showing only modules relevant to the current route
fix module graph being merged by path. It's keyed by identifier now.
also add more info to import chain, e. g. layer info. and more details in tooltip.
For small routes, it can appear like the polyfill chunk takes up a sizable amount of data, but `polyfill-nomodule.js` is only sent to legacy browsers. This makes it clearer.
This PR enhances the bundle analyzer by adding visual indicators for polyfill chunks, and noting they're conditionally sent to modern or legacy browsers. The changes include:
- Adds a source map to polyfill chunks (for the large pre-bundled input only)
- Visually distinguished polyfill chunks in the treemap by lightening their color
- Added a "Polyfill" badge (other badges coming soon!) with text when viewing polyfill chunk details
<img width="388" height="227" alt="image" src="https://github.com/user-attachments/assets/bcebfba6-1e10-459a-9364-b6b8197cd3df" />
Fixes PACK-5826
This adds an interactive Treemap-style bundle analyzer app to the Next.js codebase and writes a copy to disk when `next build --experimental-analyze` is run.
* It's a separate app in `apps/bundle-analyzer` as `@next/bundle-analyzer-ui` that uses `output: 'export'` to export a purely static Next.js app
* These static resources are copied into Next.js's published `dist` directory in the `next` package itself. Users never depend on `@next/bundle-analyzer-ui`
* When users run `next build --experimental-analyze`, these static resources are copied into the user's `.next/diagnostics/analyze` along with the data payloads needed to visualize the user's app
In an upcoming PR, we'll add `next experimental-analyze` that will create analysis files without build artifacts, as well as optionally start a static file server.
Test Plan: Ran `next build --experimental-analyze` in a test app and ran a static file server to run it.
Will Binns-Smith
