How to Reduce Bundle Size in Next js

Source: Dev.to

Why Bundle Size Matters?

A heavy bundle makes your app slow before users even start interacting with it.

• Slower first load: The browser takes longer to download and parse JavaScript.
• Worse Core Web Vitals: Google cares about performance for SEO ranking.
• Bad mobile experience: On slow connections, big bundles are painful.

Trimming bundle size directly impacts user satisfaction and search rankings.

Step 1: Analyze Your Bundle

You can’t optimize blindly. First, see what’s inside your bundle.

Use @next/bundle-analyzer:

npm install @next/bundle-analyzer

Update next.config.js:

// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer({});

Run the analyzer:

ANALYZE=true npm run build

A treemap of your bundle will be generated.

Try source-map-explorer – another tool that visualizes which files contribute most to bundle size.

The goal is to know your biggest offenders before fixing anything.

Step 2: Import Smarter

A common mistake is importing whole libraries when you only need a function or two.

Bad way:

import _ from 'lodash';
const result = _.isEmpty(obj);

Better way:

import isEmpty from 'lodash/isEmpty';
const result = isEmpty(obj);

The second approach includes only what’s needed. Next.js also supports tree‑shaking and the optimizePackageImports option in next.config.js to automatically trim unused parts of libraries.

Step 3: Use Dynamic Imports

Not all code needs to load on the first page render. Load it later if it’s only used after interaction.

Dynamic component import:

import dynamic from 'next/dynamic';

const Chart = dynamic(() => import('../components/Chart'), {
  ssr: false,
  loading: () => <p>Loading...</p>,
});

This keeps the chart code out of your initial bundle. Dynamic imports are perfect for:

• Modals
• Charts / graphs
• Third‑party widgets
• Rarely visited sections

Step 4: Keep Heavy Code on the Server

Next.js separates server and client code. Use that separation wisely.

• Do data fetching in getServerSideProps or getStaticProps instead of fetching everything on the client.
• Use Server Components (App Router) for logic that doesn’t need to run in the browser.
• Avoid shipping unnecessary business logic to the client.

This reduces bundle size, improves security, and boosts performance.

Step 5: Externalize or Replace Heavy Dependencies

Some libraries are simply too big. You have two choices: lazy‑load them or replace them.

• Charts: Use a lighter charting library or load the heavy one on demand.
• Date libraries: Replace Moment.js with Day.js or date‑fns.
• React → Preact: Some projects swap React for Preact for smaller bundles (check compatibility first).

In next.config.js, you can also externalize server‑only packages so they don’t end up in the client bundle.

Step 6: Optimize Assets (Not Just JavaScript)

Optimizing images, fonts, and CSS improves overall performance.

• Images: Use Next.js <Image> component for lazy loading, compression, and responsive sizing.
• Fonts: Import only the characters and weights you need; consider self‑hosting Google Fonts.
• CSS: Enable Tailwind’s purge feature or other CSS tree‑shaking to remove unused styles.

Step 7: Continuous Monitoring

Optimizing once isn’t enough. Every new dependency or feature can add weight.

• Set budgets: Tools like size-limit warn you if a bundle exceeds a defined size.
• Re‑run analyzer: Make it part of your CI workflow before deploying.
• Track performance: Monitor Lighthouse scores, LCP (Largest Contentful Paint), and TTI (Time To Interactive).

Quick Checklist

• Analyze with @next/bundle-analyzer.
• Replace big dependencies with lighter alternatives.
• Import only what’s needed.
• Use next/dynamic for non‑critical UI.
• Keep heavy logic server‑side.
• Optimize images, fonts, and CSS.
• Monitor bundle size continuously.

Final Thoughts

Reducing bundle size in Next.js isn’t about obsessing over every single byte; it’s about focusing on what really matters: faster load times, better SEO, and happier users. Start with the big wins—lazy‑loading components and trimming dependencies—then fine‑tune with import optimizations and asset handling. Once you put these practices into place, you’ll notice a clear difference in how smooth and snappy your app feels.