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>
→ Download my free Next.js Handbook!
THE WEB DEVELOPER's MANUAL
You might be interested in those things I do:
Learn to code in THE VALLEY OF CODE, your your web development manual
Find a ton of Web Development projects to learn modern tech stacks
in practice in THE VALLEY OF CODE PRO
I wrote 16 books for beginner software developers,
DOWNLOAD THEM NOW
Every year I organize a hands-on cohort course coding BOOTCAMP
to teach you how to build a complex, modern Web Application in
practice (next edition February-March-April-May 2024)
Learn how to start a solopreneur business on the Internet with SOLO LAB (next edition in 2024)
- Find me on X