How to use environment variable in next js version 9.1.1.

[bipindubey-technoark]

I am facing problem in creating environment variable in in nextjs 9.1.1.
I have done R&D on it . i have read on nextjs official website. If version is 9.1.1 then we have to define environment in next.config.js file but if i create environment in next.config.js then i cant add it in gitignore because next.config.js is imp file. so i want to create environment variable in different file like .env.
and also i wanted to know what is difference between .env and .env.local and .enc.build?

Thank you

[jamesmosier]

I'd definitely recommend upgrading Next to 9.5.2! There are a TON of great new features!

If that's not possible then this link to the old dotenv example should help with older versions of Next.

You could create a .env file and then use dotenv to import those variables:

next.config.js

require('dotenv').config()
module.exports = {
  env: {
    // Reference a variable that was defined in the .env file and make it available at Build Time
    TEST_VAR: process.env.TEST_VAR,
  },
}

[bipindubey-technoark]

Great Solution ..... Thank You @jamesmosier .. Thank you so much
If i upgrade next to 9.5.2 it should not raise any more errors or bugs. Should i upgrade it or not?
It should not break my application.
This is my next.config.js file

const withFonts = require('next-fonts');
const withSass = require('@zeit/next-sass')
const withCSS = require('@zeit/next-css');

module.exports = withCSS(withFonts(withSass({
  cssLoaderOptions: {
    url: false
  },
})));

[bipindubey-technoark]

I'd definitely recommend upgrading Next to 9.5.2! There are a TON of great new features!

If that's not possible then this link to the old dotenv example should help with older versions of Next.

You could create a .env file and then use dotenv to import those variables:

next.config.js

require('dotenv').config()
module.exports = {
  env: {
    // Reference a variable that was defined in the .env file and make it available at Build Time
    TEST_VAR: process.env.TEST_VAR,
  },
}

this solution works locally but when it is deployed it is not working. i have put .env in gitignore.

[bipindubey-technoark]

@jamesmosier i have upgraded my Next version to 9.5.2 as you said but its not working
this is .env.local file

API_BASE_URL=My_URL

this is how i am accessing it in pages

process.env.API_BASE_URL

but its calling localhost not my backend url

[rohitmi0023]

Check this video out, It really helped me a lot.