--- title: Ship less JavaScript in Next.js with your AI agent description: Next.js 16.4 adds an AI agent skill called next-bundle-optimizer that analyzes Turbopack's module graph to find and fix JavaScript bundle bloat. Run it with... canonical: https://daily.dev/posts/ship-less-javascript-in-next-js-with-your-ai-agent-4f2dawmru twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Ship less JavaScript in Next.js with your AI agent | daily.dev og:description: Next.js 16.4 adds an AI agent skill called next-bundle-optimizer that analyzes Turbopack's module graph to find and fix JavaScript bundle bloat. Run it with... og:url: https://daily.dev/posts/ship-less-javascript-in-next-js-with-your-ai-agent-4f2dawmru og:image: https://api.daily.dev/og/posts/4F2DaWMRu.png og:image:alt: Ship less JavaScript in Next.js with your AI agent og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Ship less JavaScript in Next.js with your AI agent **[Next.js](https://daily.dev/sources/next)** · 4 min read · 1 upvotes · 1 comments ## Summary Next.js 16.4 adds an AI agent skill called next-bundle-optimizer that analyzes Turbopack's module graph to find and fix JavaScript bundle bloat. Run it with /next-bundle-optimizer to report issues and suggested fixes, or /next-bundle-optimizer fix to apply the proposed changes. At Vercel, agents used it to cut nearly two megabytes of compressed JavaScript across v0 and vercel.com, including 150 KB saved on most v0 pages by removing an experimental code editor loaded eagerly, and 255 KB saved on a dashboard page. The updated Bundle Analyzer (run via next analyze) now saves snapshots for diffing and highlights the critical render path. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I use the next-bundle-optimizer agent skill in Next.js 16.4? Upgrade to Next.js 16.4, add the next-bundle-optimizer skill, then run it in your AI agent with the command /next-bundle-optimizer. It requires Turbopack, the default bundler since Next.js 16, because it relies on Turbopack's detailed module graph. Run /next-bundle-optimizer fix to have the agent apply proposed changes, rerun analysis, and compare snapshots to measure the impact. _Developers trimming Next.js bundle size can track tooling updates like this one on daily.dev._ ### How much JavaScript did Vercel save by using an AI agent to optimize bundles on v0 and vercel.com? Vercel's agent cut nearly two megabytes of unnecessary compressed JavaScript across v0 and vercel.com. Examples include 150 KB saved by deferring an experimental code editor that loaded eagerly on nearly every v0 page, 255 KB saved on a vercel.com dashboard page by deferring markdown rendering and chart drawing for an agent panel, and 125 KB saved on a deployments page by separating URL parsing from a shared utility that pulled in an observability query engine. _Teams chasing real-world bundle size wins can follow case studies like this on daily.dev._ ### What does the Turbopack Bundle Analyzer in Next.js do and how do I launch it? The Turbopack Bundle Analyzer gives developers insight into a Next.js app's JavaScript bundles and is launched by running 'next analyze' in the app directory. It now automatically saves snapshots of analyses so you can diff them to measure an optimization's impact or investigate bundle growth after a feature or dependency update, and it highlights modules on the critical render path while letting you filter out async dependencies. _Frontend engineers diagnosing bundle bloat can keep up with analyzer updates like this via daily.dev._ ## Community discussion Top comments from developers on daily.dev. **@aliahmeddiyweb** · 0 upvotes > The numbers are concrete: nearly two megabytes of compressed JavaScript removed across v0 and vercel.com, with 150 KB saved on most v0 pages by dropping one eagerly loaded experimental code editor. That shows how a single import can outweigh many small optimisations. I would like to know how next-bundle-optimizer decides a module is not on the critical path, and whether the fix mode ever moves code to lazy loading in a way that delays interaction on pages where that editor is used. Snapshot diffing in next analyze sounds useful for catching regressions. ## Similar posts on daily.dev - [Next.js 16.2: 400% Faster Dev Startup, Faster Rendering, and Deeper Tooling for AI Agents](https://daily.dev/posts/next-js-16-2-400-faster-dev-startup-faster-rendering-and-deeper-tooling-for-ai-agents-vt3mgjvy9) · InfoQ · 74 upvotes · 12 comments - [Next.js 16.2: AI Improvements](https://daily.dev/posts/next-js-16-2-ai-improvements-yyflvyuqs) · Next.js · 55 upvotes · 1 comments --- Tags: [#javascript](https://daily.dev/tags/javascript), [#ai-agents](https://daily.dev/tags/ai-agents), [#nextjs](https://daily.dev/tags/nextjs), [#turbopack](https://daily.dev/tags/turbopack) [View this post on daily.dev](https://daily.dev/posts/ship-less-javascript-in-next-js-with-your-ai-agent-4f2dawmru) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Ship less JavaScript in Next.js with your AI agent","url":"https://daily.dev/posts/ship-less-javascript-in-next-js-with-your-ai-agent-4f2dawmru","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/ship-less-javascript-in-next-js-with-your-ai-agent-4f2dawmru"},"datePublished":"2026-10-28T18:04:36.444Z","dateModified":"2026-10-28T18:25:11.038Z","description":"Next.js 16.4 adds an AI agent skill called next-bundle-optimizer that analyzes Turbopack's module graph to find and fix JavaScript bundle bloat. Run it with...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/b8f0be75867fd6d33d879a61c64fe521?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/b8f0be75867fd6d33d879a61c64fe521?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Next.js","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Next.js","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/a7460ee33d92486cb5afd0fca36a116d","url":"https://daily.dev/sources/next"},"commentCount":1,"discussionUrl":"https://daily.dev/posts/ship-less-javascript-in-next-js-with-your-ai-agent-4f2dawmru","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":1}],"keywords":"javascript,ai-agents,nextjs,turbopack","timeRequired":"PT4M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Next.js","item":"https://daily.dev/sources/next"},{"@type":"ListItem","position":3,"name":"Ship less JavaScript in Next.js with your AI agent"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/ship-less-javascript-in-next-js-with-your-ai-agent-4f2dawmru","comment":[{"@type":"Comment","text":"The numbers are concrete: nearly two megabytes of compressed JavaScript removed across v0 and vercel.com, with 150 KB saved on most v0 pages by dropping one eagerly loaded experimental code editor. That shows how a single import can outweigh many small optimisations. I would like to know how next-bundle-optimizer decides a module is not on the critical path, and whether the fix mode ever moves code to lazy loading in a way that delays interaction on pages where that editor is used. Snapshot diffing in next analyze sounds useful for catching regressions.","datePublished":"2026-10-31T12:04:55.214Z","url":"https://daily.dev/posts/4F2DaWMRu#c-qRvjnKPE7","author":{"@type":"Person","name":"Ali Ahmed","url":"https://daily.dev/aliahmeddiyweb","image":"https://media.daily.dev/image/upload/s--b4sqNNv5--/f_auto,pg_1/v1792538576/avatars/avatar_lsiC0qqIxPUeSVlhCejTA?_a=BAMAMicg0"}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/ship-less-javascript-in-next-js-with-your-ai-agent-4f2dawmru#faq","mainEntity":[{"@type":"Question","name":"How do I use the next-bundle-optimizer agent skill in Next.js 16.4?","acceptedAnswer":{"@type":"Answer","text":"Upgrade to Next.js 16.4, add the next-bundle-optimizer skill, then run it in your AI agent with the command /next-bundle-optimizer. It requires Turbopack, the default bundler since Next.js 16, because it relies on Turbopack's detailed module graph. Run /next-bundle-optimizer fix to have the agent apply proposed changes, rerun analysis, and compare snapshots to measure the impact. Developers trimming Next.js bundle size can track tooling updates like this one on daily.dev."}},{"@type":"Question","name":"How much JavaScript did Vercel save by using an AI agent to optimize bundles on v0 and vercel.com?","acceptedAnswer":{"@type":"Answer","text":"Vercel's agent cut nearly two megabytes of unnecessary compressed JavaScript across v0 and vercel.com. Examples include 150 KB saved by deferring an experimental code editor that loaded eagerly on nearly every v0 page, 255 KB saved on a vercel.com dashboard page by deferring markdown rendering and chart drawing for an agent panel, and 125 KB saved on a deployments page by separating URL parsing from a shared utility that pulled in an observability query engine. Teams chasing real-world bundle size wins can follow case studies like this on daily.dev."}},{"@type":"Question","name":"What does the Turbopack Bundle Analyzer in Next.js do and how do I launch it?","acceptedAnswer":{"@type":"Answer","text":"The Turbopack Bundle Analyzer gives developers insight into a Next.js app's JavaScript bundles and is launched by running 'next analyze' in the app directory. It now automatically saves snapshots of analyses so you can diff them to measure an optimization's impact or investigate bundle growth after a feature or dependency update, and it highlights modules on the critical render path while letting you filter out async dependencies. Frontend engineers diagnosing bundle bloat can keep up with analyzer updates like this via daily.dev."}}]} ```