← flaviocopes.com

Next.js, adding features just to development mode

Published Jun 25 2021

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>

Wanna go from noobie to expert?

I wrote an entire book on this topic 👇

© 2023 Flavio Copes Flavio Copes using Notion to Site Notion to Site. Follow on Twitter

Solopreneur? Wannabe? Adventure awaits