Next.js, adding features just to development mode

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>
}


This content originally appeared on flaviocopes.com and was authored by flaviocopes.com

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>
}


This content originally appeared on flaviocopes.com and was authored by flaviocopes.com


Print Share Comment Cite Upload Translate Updates
APA

flaviocopes.com | Sciencx (2021-06-25T05:00:00+00:00) Next.js, adding features just to development mode. Retrieved from https://www.scien.cx/2021/06/25/next-js-adding-features-just-to-development-mode/

MLA
" » Next.js, adding features just to development mode." flaviocopes.com | Sciencx - Friday June 25, 2021, https://www.scien.cx/2021/06/25/next-js-adding-features-just-to-development-mode/
HARVARD
flaviocopes.com | Sciencx Friday June 25, 2021 » Next.js, adding features just to development mode., viewed ,<https://www.scien.cx/2021/06/25/next-js-adding-features-just-to-development-mode/>
VANCOUVER
flaviocopes.com | Sciencx - » Next.js, adding features just to development mode. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/06/25/next-js-adding-features-just-to-development-mode/
CHICAGO
" » Next.js, adding features just to development mode." flaviocopes.com | Sciencx - Accessed . https://www.scien.cx/2021/06/25/next-js-adding-features-just-to-development-mode/
IEEE
" » Next.js, adding features just to development mode." flaviocopes.com | Sciencx [Online]. Available: https://www.scien.cx/2021/06/25/next-js-adding-features-just-to-development-mode/. [Accessed: ]
rf:citation
» Next.js, adding features just to development mode | flaviocopes.com | Sciencx | https://www.scien.cx/2021/06/25/next-js-adding-features-just-to-development-mode/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.