Build output analysis in NextJS

Introduction

Build output analysis helps you understand what files and code your Next.js app creates when you build it. This shows how your app is organized and how big each part is.

You want to see which parts of your app take the most space after building.

You need to find unused code or big files slowing down your app.

You want to optimize loading speed by checking what loads on the client.

You want to understand how Next.js splits your code into chunks.

You want to check if your images and assets are included correctly.

Syntax

NextJS

npx next build
npx next build --profile
npx next build && npx source-map-explorer '.next/static/chunks/*.js'

npx next build creates the production build of your app.

Using --profile or tools like source-map-explorer helps see detailed info about the build output.

Examples

This runs the build process and shows basic output in the terminal.

NextJS

npx next build

This runs the build and shows detailed timing and size info for each part.

NextJS

npx next build --profile

This builds the app and then opens a visual report to explore bundle sizes interactively.

NextJS

npx next build && npx source-map-explorer '.next/static/chunks/*.js'

Sample Program

This is what you see after running npx next build. It lists pages, their sizes, and shared JavaScript chunks. This helps you know which pages are bigger and what code is shared.

NextJS

/* Run in terminal */
npx next build

/* Sample output snippet */
info  - Creating an optimized production build...
info  - Compiled successfully
info  - Collecting page data...
Page                                                           Size     First Load JS
┌ ○ /                                                          1.2 kB         75.3 kB
├   /_app                                                      0 B            73.9 kB
├ ○ /about                                                     2.3 kB         75.4 kB
└ ● /index                                                     3.1 kB         75.3 kB
+ First Load JS shared by all                                  73.9 kB
  ├ chunks/framework.123abc.js                                 45.6 kB
  ├ chunks/main.456def.js                                      20.1 kB
  └ chunks/pages/index.789ghi.js                               8.2 kB

Page                                                           Size     First Load JS
┌ ○ /contact                                                   2.0 kB         75.3 kB

Done in 15.3s.

Important Notes

The build output shows sizes in kilobytes (kB) to help you spot large files.

Pages marked with ○ are static, ● means server-side rendered.

Use tools like source-map-explorer for a visual breakdown of your bundles.

Summary

Build output analysis helps you see what your Next.js app creates when building.

You can find big files and optimize your app's loading speed.

Use commands like npx next build and tools for detailed reports.