Skip to content

Next.js, adding features just to development mode

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

THE AHA STACK MASTERCLASS

Now open with 50% off launch discount!

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 20 books to help you become a better developer:

  • Astro Handbook
  • 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
  • CSS Handbook
  • Node.js Handbook
...download them all now!

Related posts that talk about next: