Next.js, adding features just to development mode
New Courses Coming Soon
Join the waiting lists
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
Here is how can I help you:
- COURSES where I teach everything I know
- CODING BOOTCAMP cohort course - next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- Follow me on X