---
title: "Silence Console Logs in Next.js 16+ for Production"
slug: "nextjs-disable-console-logs-production"
published: "2025-11-01"
updated: "2025-10-23"
categories:
  - "Next.js"
tags:
  - "Next.js 16"
  - "console.log override"
  - "production optimization"
  - "disable console logs"
  - "React console management"
  - "debugging Next.js"
  - "development vs production logs"
  - "web performance improvement"
llm-intent: "reference"
audience-level: "intermediate"
framework-versions:
  - "next.js@16+"
  - "react@18+"
  - "typescript@5+"
  - "node@18+"
status: "stable"
llm-purpose: "Suppress console logs in Next.js 16+ production easily. Implement this simple two-step solution for cleaner logs and improved performance. Try it now!"
llm-prereqs:
  - "Access to Next.js"
  - "Access to TypeScript"
  - "Access to React"
llm-outputs:
  - "Completed outcome: Suppress console logs in Next.js 16+ production easily. Implement this simple two-step solution for cleaner logs and improved performance. Try it now!"
---

**Summary Triples**
- (lib/disable-console.ts, overrides, console.log on the server when NODE_ENV !== 'development')
- (components/system/disable-console-logs.tsx, overrides, console.log in the browser during hydration when NODE_ENV !== 'development')
- (root layout (app/layout.tsx), imports, server-side override module and client DisableConsoleLogs component to ensure both server and client suppression)
- (override implementation, replaces, console.log with a no-op function but leaves other console methods (error, warn, info) unchanged)
- (export {} in TypeScript file, ensures, the disable-console module is treated as an ES module (no TypeScript top-level script errors))

### {GOAL}
Suppress console logs in Next.js 16+ production easily. Implement this simple two-step solution for cleaner logs and improved performance. Try it now!

### {PREREQS}
- Access to Next.js
- Access to TypeScript
- Access to React

### {STEPS}
1. Create Console Override Module
2. Implement Client-Side Logs Override
3. Patch Root Layout with Overrides

<!-- llm:goal="Suppress console logs in Next.js 16+ production easily. Implement this simple two-step solution for cleaner logs and improved performance. Try it now!" -->
<!-- llm:prereq="Access to Next.js" -->
<!-- llm:prereq="Access to TypeScript" -->
<!-- llm:prereq="Access to React" -->
<!-- llm:output="Completed outcome: Suppress console logs in Next.js 16+ production easily. Implement this simple two-step solution for cleaner logs and improved performance. Try it now!" -->

# Silence Console Logs in Next.js 16+ for Production
> Suppress console logs in Next.js 16+ production easily. Implement this simple two-step solution for cleaner logs and improved performance. Try it now!
Matija Žiberna · 2025-11-01

I was pushing a Next.js 16+ build toward production when the console turned into a disaster. Every debug `console.log` we relied on during dev spammed the production logs. I wanted a surgical fix: keep the messages locally, silence them in prod. Here’s the exact two-step patch I dropped into the project.

First, create a tiny side-effect module that overrides `console.log` whenever `NODE_ENV` isn’t `development`. Place it somewhere you can import from the root layout so it executes on the server before anything else runs.

```ts
// File: lib/disable-console.ts
const noop = (..._args: unknown[]) => {};

if (process.env.NODE_ENV !== "development") {
  console.log = noop;
}

export {};
```

This swaps `console.log` for a harmless no-op function outside dev. The `export {}` keeps TypeScript happy so it treats the file as a module. With this imported from the root layout, server-side code no longer emits logs in production.

Next, wire up a tiny client component that applies the same override in the browser. React’s `useEffect` is enough. Render this component near the top of the layout so it runs as soon as the app hydrates.

```tsx
// File: components/system/disable-console-logs.tsx
"use client";

import { useEffect } from "react";

const noop = (..._args: unknown[]) => {};

export function DisableConsoleLogs() {
  useEffect(() => {
    if (process.env.NODE_ENV !== "development") {
      console.log = noop;
    }
  }, []);

  return null;
}
```

Finally, patch the root layout to import both helpers. That guarantees the override runs for server renders and client hydration.

```tsx
// File: app/layout.tsx
import "@/lib/disable-console";
import { DisableConsoleLogs } from "@/components/system/disable-console-logs";

// ...rest of the layout imports

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="de">
      <body>
        <DisableConsoleLogs />
        {/* your providers/components */}
      </body>
    </html>
  );
}
```

And that’s the hack. In development you still get full logging, while production quietly ignores every `console.log` without touching the rest of your codebase. No third-party logger, no environment gymnastics—just a couple of lines, purposefully placed. Let me know in the comments if you have questions, and subscribe for more practical development guides. Thanks, Matija

## LLM Response Snippet
```json
{
  "goal": "Suppress console logs in Next.js 16+ production easily. Implement this simple two-step solution for cleaner logs and improved performance. Try it now!",
  "responses": [
    {
      "question": "What does the article \"Silence Console Logs in Next.js 16+ for Production\" cover?",
      "answer": "Suppress console logs in Next.js 16+ production easily. Implement this simple two-step solution for cleaner logs and improved performance. Try it now!"
    }
  ]
}
```