Why .next folder is so big? 251MB total

[oran1248]

Hi,

I'm wondering if it's ok that my .next folder's size is 251MB.
I'm building with target: serverless, and after running npm run build successfully, I looked into .next folder and notice that every file in /pages folder is ~4.5MB, also in /api folder. There are files that are even ~10MB.
Is it ok? Am I doing something wrong maybe?
Thanks

[Sangdt]

I think the .next folder is for caching in development and stuff. If you wanted to see the file output of the production build run "next export" after build.

[oran1248]

@Sangdt Are you sure? because when I'm running next build it's creating the .next folder

[avagru]

Hi.
My project's .next folder's size is too large, too.
npm run dev: 233MB
npm run build: 166MB
npm run dev and then after hours its size is increased to 9GB~13GB.
I think it is for caching in dev version but it is not normal and not good.

How can I fix this issue?

[justinholistgr]

I encountered similar issue where the .next folder size is too large that fill up all my disk space on the server, making me unable to deploy new changes to the server via CI/CD. At the end I have to remove the folder and build manually.

Is there any way that it could remove very old caches when running next build?

[westinde]

my .next folder is over 10gb that's wayy to big.

[nullCode666]

🐮

[Kasopej]

this really cracked me up :-D

[pooya-dehghan]

same problem here !!! its over 1.5 G after npm run build...
whats going on ?!

[GabenGar]

Only 316 MB for me with 304 MB being the cache folder.

[nullCode666]

牛

[usamaehsan]

If anyone else is facing this problem, delete your .next folder before running npm run build.
My .next folder size was 1.5gb and after deleting it , I again entered npm run build . Size reduced to just 96 mb

[miratcan]

Thank you bro!

[aliamiri1380]

still too big ...
what is it doing anyway ?

[pbalajiips]

i too have the same issue? is it ok to remove the dir .next/cache after build ?

[fabb]

i wonder the same thing: #43666

maybe it's needed at runtime for ISR or image optimization, but i don't know for sure and would like to hear from next.js maintainers.

@timneutkens

[leerob]

Next.js can automatically create a standalone folder which copies only the necessary files for a production deployment including select files in node_modules: https://nextjs.org/docs/advanced-features/output-file-tracing#automatically-copying-traced-files

[bschwartz757]

@leerob We're using [email protected]. Which version was this added in, and is it officially supported or experimental?

[leerob]

12.2 is when the option was stabilized.

In our continued effort to improve self-hosting Next.js, we are stabilizing our experimental outputStandalone: true config to output: 'standalone'. This config reduces deployment sizes drastically by only including necessary files/assets, including removing the need for installing all of node_modules in the built deployment package. This config can be seen in action in our with-docker example.

[bschwartz757]

@leerob Thanks so much! We were able to get this working with experimental.outputStandalone in version 12.1.6, we'll upgrade to 12.2.2.

The .next/standalone directory is much smaller, as mentioned. Unfortunately it doesn't seem to contain node modules for our custom server - but that's to be expected. I think we'll need a manual step for that until we can refactor out the custom server. The good news in our case is that we are now able to get under the Lambda size limit.

Thanks again for the help!

[lonffreytu]

Next.js can automatically create a standalone folder which copies only the necessary files for a production deployment including select files in node_modules: https://nextjs.org/docs/advanced-features/output-file-tracing#automatically-copying-traced-files

Thx, bro

[sakird]

How can we use .env variables with output: 'standalone'?

[Darginec05]

After running next dev my folder .next/cache -> 7gb
As a temporary fix I disabled cache for next build in the next.config.js file if (!dev) config.cache = false.
For the dev version I just wrote script to remove large .pack files in .next/cache/webpack folder.
And this script is located in GSP and running only in dev version.

Weird, but as a temporary fix :/
Waiting for the good solution

[tommy31]

Hey everyone,

any update on this issue? We are facing the same problem... is this a normal behaviour?

We ended up building our app in standalone mode. But there is a lack of documentation on this ./next/cache/webpack/ directory, we still didn't understand it's purpose.

Thanks for readings.
Tom

[shriekdj]

I have found the issue in the documentation of nextjs at here https://nextjs.org/docs/app/building-your-application/optimizing/memory-usage#disable-webpack-cache

Why issue occures is on the same page https://nextjs.org/docs/app/building-your-application/optimizing/memory-usage#webpack-build-worker

For direct solution you can just use this code.

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    if (cfg.cache && !dev) {
      cfg.cache = Object.freeze({
        type: 'memory',
      })
      cfg.cache.maxMemoryGenerations = 0
    }
    // Important: return the modified config
    return config
  },
}
 
export default nextConfig

If it still giving you issues you can dm me on twitter https://x.com/shriekdj

[OssiPesonen]

Thanks a lot for all the comments in this discussion! I had an issue deploying my Next.js hybrid app to Azure Static Web Apps, because the cache folder in the build folder ended up taking 90% of the size, exceeding the > 100MB limit. By adding a removal for that folder, I managed to fix the deployment issue.

Hopefully, there will be a more permanent solution to this in the context of automated deployments.

[timneutkens]

Hopefully, there will be a more permanent solution to this in the context of automated deployments.

Have a look at #17218 (comment)

[adarsh-drishya]

i am facing this issue the standalone folder is way too large, more than 300 mb which exceeds the limit of 200 mb to deploy to aws amplify instance. @timneutkens

[mcmxcdev]

There seems to be no solution for this after more than two years of discussion.

Can we at least have the cache size limited to a maximum and make it configurable? A coworker ended up with a size of 300GB+ just for the cache folder... My SSD is only 128GB...

[Darginec05]

Could you show package.json and how many dynamic imports do you have in project?

[Darginec05]

SOLVED.

So, as I wrote earlier, my cache folder took up about >= 7 GB in development mode.
This usually happens if you have multiple dynamic imports (my application has 123 dynamic imports of large components).
I noticed that the fragments used dependent packages from node_modules.
So problem can be found here.

Option for webpack optimization splitChunks setted to false in dev mode.
As a solution I added these changes to my next.config.js:

if (dev) { config.optimization.splitChunks = { cacheGroups: { framework: { chunks: 'all', test: /[\\/]node_modules[\\/]/, name: 'framework', enforce: true, }, }, }; }

[Darginec05]

So, node_modules splitted into separate chunk and cache size after these changes is ±900MB in dev.

[SuperOleg39]

Good catch, sad that I found that comment so late.

Investigate and made a similar optimization in our projects with webpack few month ago, and trying to share this experience with next team - #49929 (comment)

Interesting, that splitChunks was added to dev server build recently - #54988

@timneutkens hi! Maybe you know some significant disadvantages of adding splitChunks to client Dev build?

[Drillman]

I came across the same issue of a big .next/cache folder, and it was making my Docker image way too big. After searching a bit I found this answer, the cache folder is only used for building purposes and is not needed for production nor running the app in general it seems.

[shriekdj]

For Your Specific Docker related issue this section of nextjs docs can help you https://nextjs.org/docs/app/building-your-application/deploying#configuring-caching.

It helps stopping or customizing cache behaviour.

cacheMaxMemorySize: 0 will disable the in memory ( RAM ) caching size which was 50 mb

cacheHandler: require.resolve('./cache-handler.js') wil need to configure your cache. there is cache-handler docs for it.

[shriekdj]

you can use cache-handler.js for your other cache handler programs like redis or something else

[Stroller15]

can anyone tell me how you are knowing your folder sizes??
thanks

[fabb]

You could use the disk usage tool:
https://en.m.wikipedia.org/wiki/Du_(Unix)

[Stroller15]

Thanks man!

[fungilation]

Upgrading from Next 11 to 14 here. What observation I see is build cache >1gb and thus Vercel can no longer cache it

Build cache size exceeds limit (1.00 GB). Can not store build cache.

On Next 11, my builds used to have 400mb cache. Now:

du -h .next/cache
  0B	.next/cache/swc/plugins/v7_macos_x86_64_0.104.41
  0B	.next/cache/swc/plugins
  0B	.next/cache/swc
465M	.next/cache/webpack/client-production
306M	.next/cache/webpack/edge-server-production
305M	.next/cache/webpack/server-production
1.1G	.next/cache/webpack
1.1G	.next/cache

I have 1 function which is "server-rendered on demand using the Edge Runtime". Many others are on Node runtime. So why the near duplication between the edge-server-production and server-production cache folders?

This also leads to build being slow, if webpack is building twice for every function, 1 for Edge and 1 for Node, regardless of how the api functions are actually deployed. So it's a double whammy, wasting build time and cache size (exceeding 1gb in my case)

Can someone from Vercel / Next shed some light please

[kcblaq]

I am currently stuck on same issue, size now is 1.6g and I can no longer work with git.

I will appreciate help ASAP.

[fungilation]

@leerob ?

[Jaimayal]

Just found mine goes over 6gb:
4.6G .next/cache/webpack/server-production
11M .next/cache/webpack/edge-server-production
1.6G .next/cache/webpack/client-production
6.2G .next/cache/webpack

I barely have any images, so I believe my issue is similar to yours. Have you tried disabling webpack cache?
https://nextjs.org/docs/app/building-your-application/optimizing/memory-usage#disable-webpack-cache

Edit: I'm on Next 14.0.4

[Diluka]

I have a 5+GB .next/cache/images

[Diluka]

It's grow from 0 to 5GB during standalone app running.

[shriekdj]

it's because of your public folder have too many images.

When we run next build it analyzes all the images in your public folder first too cache it then it builds project completely.

Here I think you must also facing the server startup taking too much time from normal for production. I had the same issue so I am now showing images from our local cdn domain.

[shriekdj]

You can disable or stop this behavior with below code as per https://nextjs.org/docs/pages/api-reference/components/image#minimumcachettl

with updating next.config.js where

images: {
  minimumCacheTTL: 60
  // it can 0 also for disabling
}

[shriekdj]

also it creates 2 formats for optimising images sometimes 'image/avif' | 'image/webp'

You can set it to use only single one which like this

images: {
  formats: [ 'image/webp' ]
}

[shriekdj]

this is because of the default cache created by the nextjs

For Resolving FetchCache Issue

You can add this at root layout.tsx

export const fetchCache = 'no-store'
// same level as metaData and RootLayout


// or Adding revalidate of 10 second or 5 minutes ( 300 seconds )

export const revalidate = 300

For Solving issue of Image Cache add this in next.config.js where minimumCacheTTL is number of seconds to cache the images

images: {
  minimumCacheTTL: 86400
}

[kamran1381]

the .next file size increases every time npm run dev is performed. saw something about deleting the cache folder before deploying it, but the cache folder is just going to come back after you run your server again. it seems like there is no permanent solution of containing the cahce folder size in next 14 yet :(

[syedusama5556]

you can just delete the .next/cache folder and then deploy it it works fine and the size is reduced from 1.2GB to 9.5MB and we are running it using PM2 on the live server without any issue.

[fungilation]

nope, doesn't work. I can delete .next/ all I want, 1.1G comes back every time on build. Local or on Vercel

#17218 (comment)

[syedusama5556]

yes you have to delete it after every successful build and you have to use npm run start instead of dev on live server, also note first you have to understand the cache will not be gone forever on live server also as nextjs caches the components or routes that are frequently used so you will see some new caching it wont me in GBs but much smaller. if you dont want any cache you can create a cronjob in Linux server and run it preodically to check if size of cache folder is exceeding a certain amount then remove it

[vipinyadav2k]

So we dont need node_modules files right ? As that is also somewhat 500mb

[GabenGar]

What do you mean by "don't need"? That's literally the folder where all dependencies of your code, including nextjs, are stored.

[vipinyadav2k]

nvm i was able to deploy my project without it and it works fine.

[shriekdj]

@GabenGar , Maybe he was talking about the static export

[adnan-smlatic]

Peak indian software development

[SouthLink]

I'm using a custom server, but unfortunately it's in standalone mode and server.js can't be tracked.

https://nextjs.org/docs/pages/building-your-application/configuring/custom-server
Standalone output mode, does not trace custom server files and this mode outputs a separate minimal server.js file instead.

So I removed.next/cache and reduced the build cache by 1.5GB，But I can't remove the node_module， this my app dockerfile:

FROM node:16-slim as next-base

########                install + builder                 ########
FROM next-base AS installBuilder

WORKDIR /www

# Copy package.json
COPY ./package.json /www/package.json
COPY ./.npmrc /www/.npmrc
COPY ./pnpm-lock.yaml /www/pnpm-lock.yaml 

RUN  npm install webpack -g && npm install -g [email protected] && pnpm install

COPY . /www

# delete cache，It does not affect application operation
RUN pnpm run build:test  && rm -rf /www/.next/cache

########              runner                ########
FROM next-base AS runner

RUN groupadd www -g8080
RUN useradd www -u8080 -g8080

WORKDIR /www

RUN apt-get update && apt-get install nginx git -y

# pm2 
RUN npm install pm2@latest -g
RUN pm2 update
RUN pm2 install pm2-intercom

COPY --from=installBuilder /www ./

COPY ./_build/nginx_develop.conf /etc/nginx/nginx.conf

CMD pm2 start ecosystem.config.js --env test && nginx -g 'daemon off;'

[lakshya-webDev]

I face the same issue it have reduced to 800mb but still I want to know if there is any quicky solution for this size issue

/ Import necessary modules and configuration
const withPlugins = require("next-compose-plugins");
const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});
// Define the Next.js configuration
const nextConfig = {
  reactStrictMode: false,
  future: {
    webpack5: true,
  },
  compress: true,
  eslint: {
    ignoreDuringBuilds: true,
  },
  images: {
    minimumCacheTTL: 86400,
    formats: ["image/webp"],
    remotePatterns: [
      {
        protocol: "https",
        hostname: `${process.env.NEXT_PUBLIC_STRAPI_URL}`,
        port: "",
      },
    ],
  },
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    // Modify webpack config if necessary
    return config;
  },
};

// Export the configuration using next-compose-plugins
module.exports = withPlugins([withBundleAnalyzer], nextConfig);

[shriekdj]

I have found the issue in the documentation of nextjs at here https://nextjs.org/docs/app/building-your-application/optimizing/memory-usage#disable-webpack-cache

Why issue occures is on the same page https://nextjs.org/docs/app/building-your-application/optimizing/memory-usage#webpack-build-worker

For direct solution you can just use this code.

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    if (cfg.cache && !dev) {
      cfg.cache = Object.freeze({
        type: 'memory',
      })
      cfg.cache.maxMemoryGenerations = 0
    }
    // Important: return the modified config
    return config
  },
}
 
export default nextConfig

If it still giving you issues you can dm me on twitter https://x.com/shriekdj

[holedev]

I deploy to Vercel and get similar error:

Reading at https://nextjs.org/docs/app/api-reference/config/next-config-js/output#caveats, about outputFileTracingExcludes. I have add the code below in next.config.ts:

const nextConfig: NextConfig = { ..., outputFileTracingExcludes: { "/api/docs": ["./.next/cache/**/*"] }, .... };

Then the project working right, my nextjs version is 15.1.6, you can check my config at my project. Hope this help everyone.

[Ahsan2001]

Step 1: Update your next.config.ts to this file

import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
productionBrowserSourceMaps: false,
output: 'standalone',
};
export default nextConfig;

Step 2: install this package
npm install --save-dev rimraf

Step 3: replace you build script in package json
"build": "next build && rimraf .next/cache",

[bnmghjtyu0]

Opt1

1. npm install -g vercel
2. vercel build --prod
3. rm -rf .next/cache
4. vercel deploy --prebuilt --prod

Opt2

1. npm install -g vercel
2. npm install rimraf
3. package.json

{
  "vercel:deploy": "vercel build --prod && npx rimraf .next/cache && vercel deploy --prebuilt --prod"
}

4. npm run vercel:deploy

[MikeCarbone]

Running into this problem too. Cache in dev grows to > 30GB over time. Changing my dev command to this:

"dev": "NODE_OPTIONS='--max-old-space-size=4096' next dev --turbo",

automatically restarts the server once memory hits 4GB 🤷‍♂️

[MikeOuroumis]

Temporarily setting the build command in Vercel to rm -rf .next/cache && next build worked for me.

[raghavendra-k-j]

The reason is they have monopoly over React and SSR Framework.

I think there are doing som technical tackticks with Technical peoples.

I started with Next JS and moved to Remix and Because of these peoples. I tried on POC of Custom SSR rendering, It worked, so I Completed moved to React with Vite Build tool.

You can also use Remix - but it has many issues at begining.

Most of the times you do no need SSR. Go with React and Vite

[pgniadek]

I have a next js application running in production. I use app router and ISR to cache pages. After, for example, a month after deploying the app, the .next folder can take up tens of GB. The .next/server/app folder is mainly responsible for this size.

Does anyone know what I could do to prevent this folder from reaching such a large size? I don't need next js to hold the page cache indefinitely. Could I for example delete files older than 3 days from it while the application is still running production without risking breaking the application?