DEV Community

Cover image for How do you set up .env variables in your NextJS project ?
Kamal Nayan
Kamal Nayan

Posted on

3

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
Enter fullscreen mode Exit fullscreen mode
  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,
  },
};
Enter fullscreen mode Exit fullscreen mode

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 ๐Ÿš€

Image description

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.

Image of Timescale

๐Ÿš€ pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applicationsโ€”without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more โ†’

Top comments (3)

Collapse
 
dotenv profile image
Dotenv โ€ข

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

Collapse
 
arisunarya profile image
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

Collapse
 
kamalthedev profile image
Kamal Nayan โ€ข

Good point made here @arisunarya

Image of Docusign

๐Ÿ› ๏ธ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more