next.js icon indicating copy to clipboard operation
next.js copied to clipboard

NextJS version 14 & 15 got high memory usage in production builds

Open NoatToan opened this issue 7 months ago • 4 comments

Link to the code that reproduces this issue

https://github.com/NoatToan/next_memory_leak/blob/main

To Reproduce

  1. yarn && yarn build && yarn server_local
  2. Goto resource inspector of devices (htop for Linux, Activity Monitor for MacOS)
  3. goto localhost:3000 or localhost:3000/test1

Current vs. Expected behavior

Current:

### This issue happened on my PRD server with around 9GB RAM usage and need to restart the server to clean up the RAM usages with actually project has been built for 2 years

First run output build only 32.8MB After load some pages and actions. Then close all pages, the RAM usage increased to 44MB Open many tabs and spam reload, then RAM usage increased from 44MB to 8xMB (~80% increased?)

Image

Image

After that close all tabs RAM usage to around 60MB

Image

I dont understand why the server is running with NextJS increase RAM usage over time First time 32.8MB to 60MB ~ 90%. then the ram usage never back to under 60MB Image

Expect Do you know how to overcome the issue. I have tried to migrate the project to Next 15.1.6 but issue still happening and first server running is slightly over the amount of RAM usage.

I tried to record heap from Next documentation but could not understand what I can do next https://nextjs.org/docs/14/app/building-your-application/optimizing/memory-usage

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.4.0: Fri Apr 11 18:33:47 PDT 2025; root:xnu-11417.101.15~117/RELEASE_ARM64_T6030
  Available memory (MB): 18432
  Available CPU cores: 11
Binaries:
  Node: 23.7.0
  npm: 10.9.2
  Yarn: 1.22.22
  pnpm: N/A
Relevant Packages:
  next: 14.3.0-canary.11 // An outdated version detected (latest is 15.1.8), upgrade is highly recommended!
  eslint-config-next: 14.3.0-canary.11
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.8.3
Next.js Config:
  output: standalone
 ⚠ An outdated version detected (latest is 15.1.8), upgrade is highly recommended!
   Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
   Read more - https://nextjs.org/docs/messages/opening-an-issue

Which area(s) are affected? (Select all that apply)

Runtime

Which stage(s) are affected? (Select all that apply)

Other (Deployed), next start (local)

Additional context

My project is following the best practice from NextJS App router With almost server actions for fetching and revalidatePath. I have tried to force dynamic and default-no-store for fetch to find out the issues.

NoatToan avatar May 24 '25 13:05 NoatToan

I’m facing the same issue and will wait for the solution too.

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

Thanhungcuong avatar May 28 '25 06:05 Thanhungcuong

Can you try adding https://github.com/VadimOnix/next-image-cache-cleaner I notice you have <Image />. Try removing that to see if you can reproduce the leak. If you are, try the cache cleaner to see if that helps.

khuezy avatar May 30 '25 01:05 khuezy

Even I remove Image or use next-image-cache-cleaner Ram still increasing :( @khuezy

NoatToan avatar Jun 04 '25 04:06 NoatToan

Hello, I've been facing the same issue for almost 2 weeks, I was running next 14.2.30 (on a Digital Ocean Droplet), and after I upgraded to next 15.3.3 and set the next.config.mjs like suggested in next memory optimizations even with 500 requests at some POST endpoint I've setup the memory doesn't move at all.

Image

Here is my final next.config.mjs file:

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    if (config.cache && !dev) {
      config.cache = Object.freeze({
        type: 'memory',
      })
    }
    // Important: return the modified config
    return config
  },
  experimental: {
    preloadEntriesOnStart: false,
    webpackMemoryOptimizations: true,
  },
}

export default nextConfig

I've tested a lot of approaches that even I'm doubting for this, but so far it seems that it works. For my frontend routes I've also tried to spam the refresh on the browser and it increases memory but just at certain point the GC works and doesn't grow up:

Image

AngelMaldonado avatar Jun 14 '25 16:06 AngelMaldonado

@AngelMaldonado does that setup break any of the nextjs functionality like ISR?

khuezy avatar Jun 16 '25 15:06 khuezy

@AngelMaldonado does that setup break any of the nextjs functionality like ISR?

Honestly, I just have 2 static routes and all the others are dynamic so I can't really tell.

AngelMaldonado avatar Jun 16 '25 16:06 AngelMaldonado

I upgraded recently from Next 12.x to 14.2.26 and seeing a sudden increase in the memory usage without any functionality update.

I thought the updated caching mechanisms could be causing this but wasn't able to pin point as the memory freed on a restart. I don't believe the caches inside the .next directories get reset on a restart.

@NoatToan were you able to identify the root cause for your application?

nandukalidindi avatar Jun 20 '25 21:06 nandukalidindi

I overcome it by do the mixed of items:

  1. Migrate to nextjs 15.3.3
  2. Fix all uncaught error/warnings in server side
  3. Follow the suggested config the comment above

Not sure what's really happened.

NoatToan avatar Jun 22 '25 14:06 NoatToan

I upgraded recently from Next 12.x to 14.2.26 and seeing a sudden increase in the memory usage without any functionality update.

I thought the updated caching mechanisms could be causing this but wasn't able to pin point as the memory freed on a restart. I don't believe the caches inside the .next directories get reset on a restart.

@NoatToan were you able to identify the root cause for your application?

I saw the file app-runtime increased the object sizes. But could not really debug due to the optimied builds

NoatToan avatar Jun 22 '25 14:06 NoatToan

@NoatToan I came across a known memory leak in NodeJS's native fetch which reported here https://github.com/nodejs/node/issues/54274. Somehow the monkey patching of fetch by NextJS and this issue from undici seems to be causing issues for multiple. However, my use case, I am not able to pin point even with the Node downgrade to 20.15.1. Running some more tests on other fronts.

nandukalidindi avatar Jun 23 '25 17:06 nandukalidindi

I overcome it by do the mixed of items:

Migrate to nextjs 15.3.3 Fix all uncaught error/warnings in server side Follow the suggested config the comment above Not sure what's really happened.

Config reference /** @type {import('next').NextConfig} */ const nextConfig = { experimental: { preloadEntriesOnStart: false, webpackMemoryOptimizations: true, }, }

export default nextConfig

NoatToan avatar Jul 21 '25 08:07 NoatToan

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

github-actions[bot] avatar Aug 04 '25 12:08 github-actions[bot]