Fixing Next JS Heap Memory Exhaustion in next dev

Intro

While working on a Next.js project, my frontend kept crashing locally about 10–15 minutes after running npm run dev with the following output in the console.

<--- Last few GCs --->
[13956:0000017E05CBB000]  4631096 ms: Scavenge (interleaved) 12114.8 (12162.7) -> 12111.4 (12178.7) MB, pooled: 0 MB, 66.72 / 0.00 ms  (average mu = 0.303, current mu = 0.252) allocation failure; 
[13956:0000017E05CBB000]  4648045 ms: Mark-Compact (reduce) 12159.6 (12213.0) -> 12090.2 (12121.2) MB, pooled: 0 MB, 11379.65 / 91.99 ms  (+ 2009.3 ms in 374 steps since start of marking, biggest step 8.7 ms, walltime since start of marking 14620 ms) (ave
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
----- Native stack trace -----
 1: 00007FF7D200AE1F node::OnFatalError+1343

FATAL ERROR: Ineffective mark-compacts near heap limit
Allocation failed - JavaScript heap out of memory

If you are using Next.js 16 + Tailwind v4, this post may save you hours of debugging.

Project Dependencies

Next JS : 16.2.2

Tailwind : ^4

Running in development mode (next dev)

The Problem

The error was clear enough that this is a heap memory exhaustion and somewhere the memory has been gradually leaking.

This turned out to be a dev-mode tooling issue, not an application bug.

Solution

Two separate tools were continuously accumulating memory:

1. Turbopack filesystem cache
2. Tailwind v4 file scanning

Both were unintentionally scanning or caching a lot in development mode.

Fix #1 : Disable Turbopack filesystem cache in dev

Turbopack currently loads the entire .next cache into memory and keeps accumulating compiled module state across requests.

In my case, memory usage grew past 12GB before crashing.

Trade-off:
Slightly slower cold starts, but the dev server becomes stable and stops crashing.

Implementation
In your next.config.ts , Add these lines

const nextConfig: NextConfig = {
  experimental: { 
    turbopackFileSystemCacheForDev: false,
  },
};

Fix #2 : Restrict Tailwind v4 scanning

By default, Tailwind v4 scans the entire project directory during every CSS rebuild.

This causes PostCSS worker processes to accumulate state and slowly increase memory usage.

The fix is to restrict Tailwind to scan only source files.

Implementation
In your globals.css , Add these lines

@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

/* Under the standard tailwind imports. 
Do note that your project structure may vary and not have features or components directories. Replace with yours in that case.
 */
@source "../app/**/*.{tsx,ts,jsx,js}";
@source "../features/**/*.{tsx,ts,jsx,js}";
@source "../components/**/*.{tsx,ts,jsx,js}";

Result

After applying these two changes:

• No more heap memory crashes
• Stable dev server for hours
• Memory usage stays normal

My recommendation would be to avoid increasing heap memory and rather find and fix the memory leak in such cases.

That’s all ! Still got some issues? Feel free to contact me.
Thanks for reading.