Next.js: show in development, hide in production

To show something only in development in Next.js, check process.env.NODE_ENV and render the content when it equals 'development'.

I wanted to display some information on the website only if it was in development, on my local machine, and not in the deployed website.

Here’s how I did it:

const isDev = process.env.NODE_ENV === 'development'

{isDev && (
  <p>local only</p>
)}

Here’s the full picture inside a component:

export default function Header() {
  const isDev = process.env.NODE_ENV === 'development'

  return (
    <header>
      <h1>My blog</h1>
      {isDev && <p>Running in development</p>}
    </header>
  )
}

Where does NODE_ENV come from?

You don’t set it yourself. Next.js sets it for you based on the command you run.

next dev sets it to 'development'. next build and next start set it to 'production'. There’s no configuration involved.

Notice the value is the full word 'development', not 'dev'. Comparing against 'dev' is a mistake I’ve seen a few times, and the check silently never matches.

Why does this work in the browser too?

Normally environment variables are a server-side thing, and exposing one to the client needs the NEXT_PUBLIC_ prefix.

NODE_ENV is the exception. Next.js replaces process.env.NODE_ENV with the literal string at build time. Your code effectively becomes:

const isDev = 'production' === 'development'

That’s statically false in a production build, so the bundler removes the conditional JSX as dead code. Your debug markup doesn’t just stay hidden, it never ships to visitors at all.

Testing this locally

One thing that confused me at first: running the production build on your own machine also counts as production.

npm run build
npm run start

Do this locally and the dev-only content disappears. That’s correct behavior, not a bug. NODE_ENV tracks how the app was built, not where it runs.

The flip side is that every deployed build reports 'production', including preview deployments. If you need to tell previews apart from the real production site, NODE_ENV can’t help with that distinction.