Next.js › Bundle Analysis & Code Splitting

What is code splitting in Next.js and why does it matter for performance?

Beginner

Answer

Code splitting breaks your JavaScript into smaller chunks that load only when they are needed, instead of sending the entire application code to the browser on the first page load. This makes your app start faster because users only download the code for the page they are actually viewing.

// Next.js automatically splits code by route
// pages/about.js only loads when a user visits /about

Real-world example A large e-commerce site loads only the code needed for the homepage first, and loads the checkout page code separately only when a user actually starts the checkout process, keeping the initial load fast.

Common follow-ups: Does Next.js do code splitting automatically or do you need to configure it?;What is the difference between route based splitting and component based splitting?

Performance & Lazy Loading;Turbopack & Build Performance