Next.js: How to detect dev vs production

[kristojorg]

Forgive me if this is an extremely basic question, but I'm struggling to figure out how to determine if my code is running in dev or production.

I tried adding env vars to my scripts in package.json:

  "scripts": {
    "dev": "ENV=dev next",
    "build": "ENV=production next build",
    "start": "ENV=production next start"
  }

though I don't know how to access these variables. I tried:
`` const ENV = 'undefined' !== typeof window ? window.ENV : process.ENV ```` but this didn't seem to work. These variables don't show up inwindow` object from browser.

From my understanding, window is available on client and process is available on server, but I'm not sure how to set a var on them, or access that var appropriately. Alternatively, is there an existing variable that indicates production vs dev mode?

Thanks!

[timneutkens]

Please have a look at https://github.com/zeit/next.js/tree/master/examples/with-universal-configuration 😄

[sedubois]

I suggest to use NODE_ENV.

[arunoda]

Thanks guys.
I think this is answered.

[kristojorg]

Thank you all!

[firrae]

Hi there,

I don't mean to necro this but I'm having an issue when trying to work this into my project. I only see the root error when I clear my cache which is this image:

That follows the documentation on it and makes sense, but the error doesn't to me. I have copied the example @timneutkens links to verbatim into my project, even into the same locations, so I'm confused as to what is missing as when I run the isolated example it seems to work? I started working off the MobX example so maybe it's something in there?

const prod = process.env.NODE_ENV === 'production'

module.exports = {
  'BACKEND_URL': prod ? 'https://api.example.com' : 'https://localhost:8080'
}

Any help is appreciated, thanks,

Steve

P.S. Also note I have updated the .bablerc file as such:

{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    "transform-define", "./env-config.js",
    "transform-decorators-legacy"
  ]
}

and installed the transform-define package as well as put /* global BACKEND_URL */ at the top of the file I want to use the global in. Not sure what else I might have missed.

[jesper-bylund]

Can't get the example working, and the many layers of interacting libs in the example makes it hard to follow.

1. I've installed babel-plugin-transform-define
2. I've added an env-config.js
3. I've added exporting variables in the env-config
4. When I run the project, my process.enc.X variables are undefined. This is true both when I run it as DEV and build->start

I'm using a server to render my pages, so not running through "next up" or whatever the command is.

[johntran]

@raelmiu

Have you tried https://github.com/zeit/next.js#exposing-configuration-to-the-server--client-side

[onomatopoetry]

How could you use the article mentioned by @johntran to set up two sets of configuration - one for dev and one for prod?

My app communicates with an api, often in the context of a page's getInitialProps() using isomorphic-unfetch. When pages are rendered server-side fetch requires an absolute url, so I've set up my node.config.js like so:

module.exports = {
  publicRuntimeConfig: {
    API_ENDPOINT: 'http://localhost:3000/api'
  }
}

But this endpoint is the development version of the api, I can't have my app contacting the dev api in production! How can I change the API endpoint in node.config.js when the code is running in my production environment?

[johntran]

@onomatopoetry

const prodConfig = {
  publicRuntimeConfig: {
    API_ENDPOINT: 'http://google.com/api'
  }
}

const devConfig = {
  publicRuntimeConfig: {
    API_ENDPOINT: 'http://localhost:3000/api'
  }
}

module.exports = process.env.NODE_ENV === 'production ? prodConfig : devConfig

[malixsys]

In case someone (else) comes here through Google, check this example...

[rafaelcalhau]

Please have a look at https://github.com/zeit/next.js/tree/master/examples/with-universal-configuration 😄

Page is not available