NextJS: [dot]env.local returns undefined

Question

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

Nico · Accepted Answer · 2021-04-14 11:52:34Z

3

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)

answered Apr 14, 2021 at 11:52

Nico

7,2764 gold badges26 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

NextJS: [dot]env.local returns undefined

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related