Skip to content

Next.js, adding features just to development mode

How to make features available in development mode, while hiding them in production

Some sites/apps I work on have 2 modes. One is the development mode, the other is production, the live version.

With Next.js I find this very easy to do so by checking the value of process.env.NODE_ENV, which is set to 'development' when running it with npm run dev.

So I might have an API route that should not be public, and at the top of it, I add

if (process.env.NODE_ENV != 'development') return null

so it does not work in production.

The same applies to a page component, which will render a blank page if accessed in production.

I use the same technique to add JSX to a component only in development mode:

{
  process.env.NODE_ENV == 'development' && <div>hi</div>
}

→ Get my Next.js (pages router) Handbook

I wrote 21 books to help you become a better developer:

  • HTML Handbook
  • Next.js Pages Router Handbook
  • Alpine.js Handbook
  • HTMX Handbook
  • TypeScript Handbook
  • React Handbook
  • SQL Handbook
  • Git Cheat Sheet
  • Laravel Handbook
  • Express Handbook
  • Swift Handbook
  • Go Handbook
  • PHP Handbook
  • Python Handbook
  • Linux Commands Handbook
  • C Handbook
  • JavaScript Handbook
  • Svelte Handbook
  • CSS Handbook
  • Node.js Handbook
  • Vue Handbook
...download them all now!

Also, JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - the 2025 edition, starting on February 4th, is now open for signups!

Bootcamp 2025

Signups open NOW!