Back to the notebook
AI2 min read

Next.js adds an AI bundle optimizer: measure before changing imports

The October 28 tooling announcement helps trace unnecessary client JavaScript. Start with an audit and compare the result.

What changed

Next.js has announced the next-bundle-optimizer agent skill. It uses Turbopack’s module graph to inspect bundle relationships, so this workflow requires Turbopack and a compatible Next.js 16.4 release. The default skill behaviour reports findings; applying fixes is a separate action.

Why it matters

A lazy import alone may not defer a heavy module if another eager import still reaches it. Treat the tool as evidence for an import investigation, not a guaranteed performance gain. Existing webpack projects need a compatibility decision before adopting this workflow.

What to do

  • Use a supported, patched Next.js release and a development checkout. Review the official skill before the optional installation below.
  • Start with /next-bundle-optimizer in report mode. Save a baseline and choose one small change to investigate.
  • Compare the same routes and compressed initial JavaScript before and after, then verify interactive behaviour.

Reference commands

Optional official skill installation in a development checkout
npx skills add vercel/next.js --skill next-bundle-optimizer

Verify the result

Keep changes only when measurements and functional checks support them. Do not copy savings from the vendor’s applications into your own results, and do not trade a required dependency or security fix for a smaller bundle.

Official sources

Take it into your project

Get the files, keep the guide, or give your coding assistant a ready-to-use brief.

Set it up with AI

Copy this English prompt into your coding assistant. It includes the article, available files and project setup steps.

View the setup prompt
AI setup prompt · English
Read this news or bug-fix article as reference material:
https://nethanelfitoussi.com/article/nextjs-ai-bundle-optimizer-october-2026?lang=en

Goal: apply the documented workflow to my development project.
Read the existing project instructions, inspect the relevant files and explain the smallest useful setup.

Use the article and its examples as references. Identify any missing project files before making changes.

If I have not supplied a project folder, ask which development project to use. Do not invent a repository URL.

Additional project setup instructions:
Use https://nextjs.org/blog/ship-less-javascript-with-ai as the reference for a local bundle audit. First inspect my actual Next.js version, package manager and build command. The announced analyzer workflow requires a compatible patched Next.js 16.4 release and Turbopack; do not silently replace an existing webpack build or install an unpatched 16.4.0. Review the official next-bundle-optimizer skill before installation. Start in report-only mode, save a baseline and identify large eager imports, duplicated dependencies and client boundaries. Propose one small change at a time; validate application behaviour and compare initial compressed JavaScript under the same build conditions. Report measured changes, not promised savings. Stop before production changes, push or deployment.

Check the dated advisory and current official vendor guidance. Identify whether my installed version and configuration are affected before proposing a fix.

Give me a short plan, then make the agreed local changes and run the relevant checks. Report actual results and anything not verified. Stop before credentials, paid services, production changes, push, merge or deployment.
The prompt
Use https://nextjs.org/blog/ship-less-javascript-with-ai as the reference for a local bundle audit. First inspect my actual Next.js version, package manager and build command. The announced analyzer workflow requires a compatible patched Next.js 16.4 release and Turbopack; do not silently replace an existing webpack build or install an unpatched 16.4.0. Review the official next-bundle-optimizer skill before installation. Start in report-only mode, save a baseline and identify large eager imports, duplicated dependencies and client boundaries. Propose one small change at a time; validate application behaviour and compare initial compressed JavaScript under the same build conditions. Report measured changes, not promised savings. Stop before production changes, push or deployment.
Next.jsBundle optimizationAI