NextJS Environment for Testing

[akhan619]

I am writing this in show and tell since none of the other categories apply. I have been trying to get NextJs 13 and Cypress to play nicely. Idea was simply to define a test environment. This would enable to properly switch databases and other stuff for testing. However it's kinda confusing how environments work in NextJs for someone starting out so after countless hours of testing and googling, here is a summary of what I found. Hope this is helpful to someone out there. Based on #17032

NEXTJS ENVIRONMENT

There is a quirk when using Nextjs environments.

• During development (next dev) the NODE_ENV is set to 'development' and .env.local is loaded.
• During build and run (next build & next start) the NODE_ENV is set to 'production' and .env.local is loaded.

This means:

• any public variables (those prefixed with NEXT_PUBLIC_) will still use the values in their respective files.
• normally this is not an issue except in test environment.

We can set the environment when running tests to 'test' (eg NODE_ENV=test next start). This will load the .env.test.local. However:

• process.env.NODE_ENV will still be 'production'.
• any public variables that are used on client side will still show the values set in the .env.local as they are set during build step.

Workaround is to define APP_ENV and set that properly in the respective files to get the environment we want. However, APP_ENV cannot be public as it will then be set during build and use values in .env.local.