Not able to use environment variables in next.js

Question

Hullo !
Basically i used env vars in next.config.js but since i wanted to put the website on github on a public repo, i wanted to secure the .env, so i made a .env.local and put the vars there and used them in next.config.js and then in the app. However, it is not working. An instance of them not working is, I am saving the mongoDB client link as a env variable and using that in the dbConnect.js function however it doesnt work and throws an error saying "No URI is available got undefined"


const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  env: {
    DB_URL: process.env.DB_URL,
    GITHUB_ID: process.env.GITHUB_ID,
    GITHUB_SECRET: process.env.GITHUB_SECRET,
    LINK: process.env.LINK,
  },
};

module.exports = nextConfig;

This is the next.config.js

DB_URL:"link",
GITHUB_ID:"id",
GITHUB_SECRET:"secret",
LINK:"link"

This is .env.local

unhandledRejection: MongooseError: The `uri` parameter to `openUri()` must be a string, got "undefined". Make sure the first parameter to `mongoose.connect()` or `mongoose.createConnection()` is a string. Error for dbConnect.js function where i use the env var


const connection = {};
async function dbConnect() {
  if (connection.isConnected) {
    return;
  }
  const db = await mongoose.connect(process.env.DB_URL, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  });
  connection.isConnected = db.connections[0].readyState;
  console.log(connection.isConnected);
}

export default dbConnect;

The dbConnect.js function

Were you able to solve the issue you ran into? – Andrew Chung Oct 09 '22 at 20:59 — Andrew Chung, Oct 09 '22 at 20:59

Andrew Chung · Answer 1 · 2022-10-08T15:39:42.087

May need to see the imports above what you wrote to fully help, but these approaches may help:

APPROACH 1 (assuming there is a loading issue)

APPROACH 1 - Option 1/ more likely - try this first.

import * as dotenv from 'dotenv'
dotenv.config()

You can see the load examples here (there are two flavors on the page, I'm choosing the one you're mostly likely to be using.)

There is a further explanation here - TLDR; it goes into how importing ES6 modules work, and you must do it the way specified above.

APPROACH 1 - Option 2/ IIRC - there sometimes can be issues with special characters in Mongo connection strings - to avoid such issues, try putting quotes around your connection string (ie the part after the equal sign).

APPROACH 2 (assuming that the .env should be used as convention).
I skipped this part, but usually you should use a .env file and .gitignore it. (I know this is a painful answer but I believe it is the most common approach. Note, and now that you've added the .env file before the .gitignore you'll have to do some steps to untrack the file now that the files is already tracked.). Here is stackoverflow question on how to git ignore the file in general. And SECOND NOTE, now that that file is already in git BEFORE you did the gitignore, you'll need to do one more step which is covered here. Of course you should test this thoroughly to make sure you're not uploading secrets to a shared repo.

APPROACH 3/ there are two separate approaches I've seen that can use a different .env files. One specifying your dotenv file to a specific location and the other one is linking your new env file from the original env file. The first is outlined here and the second here.

Not able to use environment variables in next.js

1 Answers1