Next.js change

How do I cut client JavaScript in Next.js 16.4 with next analyze and the next-bundle-optimizer agent skill?

By Ohad Krispin, founder of VibeRaven · LinkedIn

Upgrade to Next.js 16.4 or later and build with Turbopack, the default bundler since Next.js 16, then add the skill with npx skills add vercel/next.js --skill next-bundle-optimizer and run /next-bundle-optimizer in your agent. It reads the module graph from saved next analyze snapshots, traces why heavy modules land in the first load, such as a lazy() import that another module also imports statically, finds duplicate versions of large dependencies and code tree shaking could not drop, and reports fixes; /next-bundle-optimizer fix applies them, reruns the analysis and compares snapshots. Without an agent, next analyze opens the Bundle Analyzer, next analyze --output --snapshot <name> saves a named snapshot, and next analyze export --snapshot <name> streams it as JSON Lines. Next.js announced the skill on October 28, 2026. Checked against the Next.js post and docs on 2026-10-28.

The lazy() import that still loads up front

The Next.js post gives the case the skill is built to find. A component wrapped in lazy() is deferred only if nothing else in the same bundle imports it statically. If any other module does, its code loads with the first page anyway, and nothing in the file that calls lazy() shows it. The skill follows import chains through the module graph to find those second imports, then proposes a small set of import boundaries to cut.

'use client';
import { lazy } from 'react';

export const HeavyComponentLoader = lazy(() => import('./HeavyComponent'));

Install the skill and run it in report mode first

By default the skill only reports issues and suggested fixes. With fix, it applies them, reruns the analysis and compares snapshots to measure the change, and the post suggests asking the agent to open one pull request per change. Besides deferred imports, the post says it finds logic that could move to React Server Components, duplicate versions of large dependencies, and imports where tree shaking could not apply.

npx skills add vercel/next.js --skill next-bundle-optimizer

# in your agent
/next-bundle-optimizer
/next-bundle-optimizer fix

next analyze: snapshots and export without an agent

next analyze builds the analysis with Turbopack and serves the analyzer on port 4000; it does not produce an application build. --output writes the data to .next/diagnostics/analyze without starting the server, and --snapshot <name> saves a named snapshot, replacing an earlier one with that name. next analyze export, new in 16.4, streams a saved snapshot as JSON Lines without rebuilding; --route limits it to one route, still with the full module graph. The analyzer itself now opens on your largest client routes, sorts a route's modules by size, diffs saved snapshots, and can hide async dependencies to show only what loads for the first render.

npx next analyze
npx next analyze --output --snapshot before
# make the change
npx next analyze --output --snapshot after
npx next analyze export --snapshot after > bundle-graph.jsonl
npx next analyze export --snapshot after --route /dashboard > dashboard.jsonl

On webpack instead of Turbopack

The analyzer and the skill need Turbopack, because they read its module graph. An app that still builds with webpack can use the @next/bundle-analyzer plugin, which Next.js documents separately: wrap next.config.js with it and build with ANALYZE=true.

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer(nextConfig);

# then
ANALYZE=true npm run build

Check each change before you merge it

Vercel says it verified each fix on a preview deployment before shipping it. A change that defers a module also changes when that code loads: open the preview and use the parts that now load later, such as dialogs, editors and panels. The post also notes that a server render can still pull chunks created with next/dynamic into the first load, so test the app rather than relying on the critical render path view alone.

Checklist

Before you let an agent change your imports

01
Check that the app is on Next.js 16.4 or later and builds with Turbopack:
```
npx next --version
```

Save a snapshot before any change:

npx next analyze --output --snapshot before

Add the skill and run it in report mode first:

npx skills add vercel/next.js --skill next-bundle-optimizer

04Apply one fix per pull request with /next-bundle-optimizer fix, and compare the before and after snapshots.
05Open the preview deployment and use the parts of each page that now load later.

Sources

Official docs behind this checklist

Browse all launch guides · Read resources · How to make and check your next change

FAQ

FAQ for builders before launch

Does next analyze build my app?

No. The docs say it analyzes the bundle output with Turbopack without producing an application build, then serves the analyzer on port 4000 unless you pass --output.

Where does next analyze save snapshots?

In <distDir>/diagnostics/analyze, normally .next/diagnostics/analyze. Copy that folder to keep a before and after outside the build directory.

Does the skill change my code without asking?

Not by default. /next-bundle-optimizer reports issues and suggested fixes; /next-bundle-optimizer fix applies them.