Env variables in NextJS – II

In our previous article, we discussed how to use environment variables in NextJS. In this article, we will dive deeper into this topic and explore some advanced techniques.

Using process.env

NextJS provides the process.env object to access environment variables. You can use this object to access the environment variables defined in your .env files or in your hosting environment. For example:

      
        const myVariable = process.env.MY_VARIABLE;
      
    

Using .env.local

In NextJS, you can create a .env.local file to define environment variables that are specific to your local development environment. The variables defined in this file will override the ones defined in .env.development and .env.production files. This is useful for defining development-specific variables such as API endpoints, debug flags, etc.

Using .env.production

Similarly, you can create a .env.production file to define environment variables that are specific to your production environment. These variables will override the ones defined in .env.development and .env.local files. This is useful for defining production-specific variables such as API keys, analytics IDs, etc.

Using process.env.NODE_ENV

NextJS sets the NODE_ENV environment variable based on the environment it is running in (development, production, etc.). You can use this variable to conditionally load different configurations or environment-specific code. For example:

      
        if (process.env.NODE_ENV === 'production') {
          // load production-specific code
        } else {
          // load development-specific code
        }
      
    

By using these techniques, you can effectively manage and use environment variables in your NextJS application, making it easier to build and deploy applications across different environments.