How do you set up .env variables in your NextJS project ?

1. First, ensure that the .env file is located in the root directory of your Next.js project.

2. Make sure you have installed the required dependencies. You can use the dotenv package to load environment variables from the .env file. Run the following command to install it:
   

npm install dotenv

1. Create a file named next.config.js in the root directory of your project if it doesn't exist already. In that file, add the following code

require('dotenv').config();

module.exports = {
  env: {
    INFURA_IPFS_ID: process.env.INFURA_IPFS_ID,
  },
};

This configuration will load the INFURA_IPFS_ID environment variable from the .env file and make it accessible in your Next.js app.

congratulations now you are good to go 🚀

After following these steps, you should be able to access the INFURA_IPFS_ID variable using process.env.INFURA_IPFS_ID in your code, just like you are doing with the projectId variable.

Comments

[Dotenv]

Check out .env.vault files as well. They have some security advantages over .env files. dev.to/dotenv/what-is-a-envvault-f...

[Ari Sunarya]

NextJs has runtime config, you can save private variable that can only accessed on the server-side, and you don't have to rebuild the project each time you change the variables

[Kamal Nayan]

Good point made here @arisunarya