Overview

Nextjs become so laggy when project become so big. Development become so hard and my 8GB Ram Macbook can’t handle that. So frustating.

Nextjs is framework react that have ton popularity, improve and optimize nextjs is essential part in development. My pain point is Memory Usage!, luckly Nextjs write it on their documentation, Optimizing Memory Usage.

What I do

I just follow their instruction and only update next.config.js. Add these lines into your next.config.js file.

/** @type {import('next').NextConfig} */
const nextConfig = {
...
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  webpack: (config, { buildId, dev, isServer, defaultLoaders }) => {
+    if (config.cache && !dev) {
+      config.cache = Object.freeze({
+        type: 'memory'
+      })
+    }
+    return config;
+  },
+  productionBrowserSourceMaps: false,
+  experimental: {
+    serverSourceMaps: false,
+  }
};

module.exports = nextConfig;

These script explain us to disable some unnesccary feature:

• Enabling eslint ignoreDuringBuilds. You should consider to disable this on production environment
• Ignore Build error in typescript. You should consider to disable this on production environment
• experimental.serverSourceMaps need to disable!, I don’t think we should enable this on development mode, you can read on here.
• Disable productionBrowserSourceMaps.

After this, my CPU and RAM usage on development become so much free space. I don’t think common project will use these feature because it will require ton of CPU and RAM.

Conclusion

Nextjs have ton of feature inside of them, we as developer rarely looking on these feature and we become spoiled. Ignoring these feature is not a big problem, it’s not a sin though. I recommend to read their docs for deeper understanding. Thank you for now, see you on next time.