2 min read

Simple way to hide your console.log() from Next.js 15

Simple way to hide your console.log() from Next.js 15
Photo by Caleb Woods / Unsplash

Yes, I use a lot of console.log() lines inside my Next.js applications. I find it helpful to keep track of events, data being fetched, and other elements that I just want reference points while I build locally including random events to figure out the common React question, "why the hell did you re-render?".

When deploying the application, I had to remove these lines to make the code more clean. I want to avoid unneeded logging that the user doesn't need to see or dealing with bloated log files but sometimes I would forget to remove them.

Environment variable solution

I would set a environment variable in the .env.local and .env.production files inside my Next.js project for ENABLE_LOGGING. I would use this to inside my code to not log messages when I was running in production but it did make the code bloated.

Next.js Compiler Solution

I was stumbling around the Next.js website and came across the section around the compiler and transforms that can be applied in your next.config.mjs file.

When building, you can remove all console.log() lines using the simple config change.

To remove all console message types, use the example:

Transform to remove all console messages in production.

If you want to remove console.log() but keep in console.error(), console.warn(), and console.info(), then you can apply a filter using the following method:

Transform to remove console.log() only and keep the excluded in production.

Hope this helps you on your Next.js building journey!