Next js bundle analyzer

Analyzing Next.js bundle size

When building a production-grade Next.js app,** you may eventually run into problems with large bundle size:

Easy case — direct dependencies

The first thing to do is to use to analyze the bundle size.

This can generate a report that looks like this:

In this case, it is obvious what is going on. We are importing the whole Font Awesome library, which is huge. We can easily optimize this by importing just the icons we need.

Complicated case — transitive dependencies

This is where official help from Next.js framework ended.

But things can still get more complicated when the bundle size is large, not because of direct dependencies, but because of dependencies of dependencies(transitive dependencies).

In the example above, it seems like an HTML5 parser and the cheerio library is included in the bundle. But why? We are not doing any HTML parsing in our app, so it must be one of our dependencies that we use that pulls in these libraries.

The plugin shows the size of each module, but it does not tell us why that module is included in the bundle in the first place. To find that out, we need more information about the build proces

How to optimize package bundling

Bundling external packages can significantly improve the performance of your application. By default, packages imported inside Server Components and Route Handlers are automatically bundled by Next.js. This page will guide you through how to analyze and further optimize package bundling.

is a plugin for Next.js that helps you manage the size of your application bundles. It generates a visual report of the size of each package and their dependencies. You can use the information to remove large dependencies, split, or lazy-load your code.

Installation

Install the plugin by running the following command:

Then, add the bundle analyzer's settings to your .

Generating a report

Run the following command to analyze your bundles:

The report will open three new tabs in your browser, which you can inspect. Periodically evaluating your application's bundles can help you maintain application performance over time.

Optimizing package imports

Some packages, such as icon libraries, can export hundreds of modules, which can cause performance issues in development and production.

You can optimize how these packages are imported by adding t

Reducing Next.js Bundle Size with Next.js Bundle Analyzer

Bundle size is one of the most important factors affecting the performance of a Next.js application. Large bundles can lead to slow load times, increased Time-to-Interactive (TTI), and ultimately, poor user experiences. Fortunately, Next.js provides a tool known as the Next.js Bundle Analyzer, which helps developers identify and eradicate unnecessary code, making it easier to optimize the bundle size.

In this article, we'll explore how to use the Next.js Bundle Analyzer to reduce your bundle size and discuss additional optimization strategies to ensure your Next.js app runs as efficiently as possible.

Setting Up Next.js Bundle Analyzer

To start optimizing your Next.js bundle size, you first need to install and configure the Next.js Bundle Analyzer.

Installation

You can install the analyzer by running the accompanying command in your Next.js project:

After installing, you'll need to revise your next.config.js file to allow the bundle analyzer. Here's how you can configure it:

By setting ANALYZE to true, you can conditionally enable the bundle analyzer. This is useful for running the analyzer only during spe

How to analyze the Next.js app bundles

Learn more about what's in your Next.js app bundles

join cohort #2

Next provides us a way to analyze the code bundles that are generated.

Open the package.json file of the app and in the scripts section add those 3 new commands:

Like this:

then install those 2 packages:

Create a file in the project root, with this content:

Now run the command

This should open 2 pages in the browser. One for the client bundles, and one for the server bundles:

This is incredibly useful. You can inspect what’s taking the most space in the bundles, and you can also use the sidebar to exclude bundles, for an easier visualization of the smaller ones:

I wrote 20 books to help you become a better developer:

CSS Handbook
Node.js Handbook
Astro Handbook
HTML Handbook
Next.js Pages Router Handbook
Alpine.js Handbook
HTMX Handbook
TypeScript Handbook
React Handbook
SQL Handbook
Git Cheat Sheet
Laravel Handbook
Express Handbook
Swift Handbook
Go Handbook
PHP Handbook
Python Handbook
Linux Commands Handbook
C Handbook

...download them all now!

Next Bundle Analyzer: Your Key to Optimizing Next.js Apps

Next.js has emerged as a leading framework for building server-rendered React applications. Its server-side rendering and static site generation make it a versatile choice for developers aiming to deliver high-performance web applications. With Next.js, you can create scalable projects that cater to a global audience, thanks to features like automatic code splitting, optimized prefetching, and the support for edge server bundles.

When optimizing your Next.js app, understanding and refining your bundle size is crucial. A bundle is a collection of js files, including your app's code and its dependencies, packaged together by a module bundler like Webpack. Large bundles can lead to slow load times, which negatively impact user experience and SEO rankings. By using a bundle analyzer, you can visualize the contents of your js bundle, identify large dependencies, and detect unused code that contributes to bloat.

In this post, we will guide you through the process of analyzing your Next.js bundles using the next bundle analyzer and other tools. We'll cover how to set up and interpret the results from the next bundle