Problem Statement
How does Next.js handle code splitting by default?
Explanation
Next.js automatically splits your JavaScript code by routes so each page only loads the code it needs, and further splits code for dynamic imports using React.lazy or next/dynamic.
This means users only download code for the page they're visiting, not the entire application, significantly reducing initial bundle size and improving load times.
Dynamic imports allow lazy loading components that aren't immediately needed, like modals or heavy libraries, loading them only when required and reducing the critical path bundle size.