Build & Bundle Analysis

`next build` prints per-route sizes and rendering modes. Pair it with `@next/bundle-analyzer` to see exactly what is in each chunk.

4 min read Level 2/5 #nextjs#build#bundle

What you'll learn

Read the build output and symbols
Add `@next/bundle-analyzer`
Enforce size budgets in CI

The build output is the single most useful page in Next’s toolchain — every route, its size, and its rendering mode in one table.

The Symbols

After next build, each route gets a symbol:

○ — static (prerendered HTML)
ƒ — dynamic (rendered on demand)
◐ — ISR (static, periodically regenerated)

If a page you expected to be static shows ƒ, walk back through it: something called cookies(), headers(), or a non-cached fetch.

Bundle Analyzer

npm i -D @next/bundle-analyzer

// next.config.ts
import withBundleAnalyzer from '@next/bundle-analyzer'

const wrap = withBundleAnalyzer({ enabled: process.env.ANALYZE === 'true' })

export default wrap({
  // your normal config
})

Run ANALYZE=true npm run build and the analyzer opens a treemap of every chunk so you can spot the 200 KB library you forgot you imported.

Enforce Budgets in CI

Parse the build output (it is well-formatted text) and fail the PR if a route grows past a threshold. Even a hand-rolled regex over the table catches the worst regressions — “this chunk grew by 80 KB” stops being an opinion and starts being a build check.

Deployment →