CODEWITHSUNDEEP
reactjsenvironment-variablesnext.js
TMA
TMA

Reputation: 1499

NextJS: [dot]env.local returns undefined

In my application I have created an environment variables into .env.local file and fetching it through process.env.ENV_KEY into component. But it is not returnig the actual value and instead it returns undefined value.

.env.local
API_ENDPOINT = "http://localhost:4200/api/"

In component I am getting the value as process.env.API_ENDPOINT but it returns as undefined

App.js
function App(props) {
    const loginUser = async event => {
    event.preventDefault()
    axios.post(`${process.env.API_ENDPOINT}/login`, data)
    .then((response) => {
      router.push('/')
    })
  } 
}

I have also tried to config into env.js file but that also not worked any how.

exports.env = {
  API_ENDPOINT: process.env.API_ENDPOINT
}

And into component have imported as 
import {env} from './config.js'
function App(props) {
    const loginUser = async event => {
    event.preventDefault()
    axios.post(`${env.API_ENDPOINT}/login`, data)
    .then((response) => {
      router.push('/')
    })
  } 
}

Moreover, I have also tried to create a build and then run the project but then also it returns undefined value.

Reference that I checked

Upvotes: 1

Views: 1419

Answers (1)

Nico
Nico

Reputation: 7276

By default all environment variables loaded through .env.local are only available in the Node.js environment, meaning they won't be exposed to the browser. In order to expose a variable to the browser you have to prefix the variable with NEXT_PUBLIC_ :

So change

API_ENDPOINT = "http://localhost:4200/api/"

To

NEXT_PUBLIC_API_ENDPOINT = "http://localhost:4200/api/"

And

axios.post(`${process.env.API_ENDPOINT}/login`, data)

To

axios.post(`${process.env.NEXT_PUBLIC_API_ENDPOINT }/login`, data)

Upvotes: 3

Related Questions