Conditional url based on NODE_ENV on Next.js

Question

Is there a way for me to set an url based on whether I'm in development or production?

Currently I have a component with the following code:

export default class Search extends Component {
    static async getInitialProps({ query: { location } }) {
        const res = await fetch(
            `http://localhost:3000/api/search?location=${location}`
        )
        const businesses = await res.json()
        return businesses
    }
...
}

I would like something that allows me to do the following:

export default class Search extends Component {
    static async getInitialProps({ query: { location } }) {
        let res
        if (environment is in developement) {
          res = await fetch(
            `http://localhost:3000/api/search?location=${location}`
          )

        } else if (environment is in production) {
          res = await fetch (
            `https://productionurl.now.sh/api/search?location=${location}`
          )
        }
        const businesses = await res.json()
        return businesses
    }
...
}

Yes, checkout dotenv. You will set a variable in a .env file and then read it from PROCESS.ENV.<CURRENT_ENV>. nodejs.org/api/process.html#process_process_env — alex bennett
– alex bennett, Commented Jan 13, 2018 at 3:32

Fabian Schultz · Accepted Answer · 2018-01-17 22:03:11Z

2

You can do that using the NODE_ENV environment variable. For a nice developer experience, set up a config file like this:

/config/index.js

const dev = process.env.NODE_ENV !== 'production';

export const server = dev ? 'http://localhost:3000/api' : 'https://productionurl.now.sh/api';

Then you can use that inside your getInitialProps methods throughout your application.

/components/Search.js

import { server } from '../config';

// ...

static async getInitialProps({ query: { location } }) {
  const res = await fetch(`${server}/search?location=${location}`);
  const businesses = await res.json();
  return businesses;
}

Make sure that the NODE_ENV variable is set inside package.json build scripts, which should look something like this.

package.json

"scripts": {
  "build": "NODE_ENV=production next build",
},

answered Jan 17, 2018 at 22:03

Fabian Schultz

18.6k6 gold badges54 silver badges58 bronze badges

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

Comments

David Oliver · Accepted Answer · 2024-07-09 12:05:56Z

1

Here's an example of how to set up development and production

const prodConfig = {
  publicRuntimeConfig: {
    API_ENDPOINT: 'https://[YOUR_DOMAIN]/api'
  }
}

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

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

edited Jul 9, 2024 at 12:05

David Oliver

2,5221 gold badge24 silver badges39 bronze badges

answered Apr 27, 2021 at 12:08

Joshua Galit

1,54715 silver badges15 bronze badges

Comments

NatKSS · Accepted Answer · 2018-01-13 19:36:40Z

0

Yes, like what alex bennett has commented, using dotenv should work for your case!

To set it up,

Install dotenv as a dependency on your Node.js project npm install dotenv --save then require it in your application require('dotenv').config()
Create a file called .env in the root directory of your project with the environment variables that you need in this <NAME>/<VALUE> format here: MY_ENVIRONMENT=production.
Change <VALUE> to production if you're deploying from your hosted server, or to development if you're deploying from your localhost.
When that's all set up, you can very easily check the loaded environment variables in your code like this (from your example):

export default class Search extends Component {
    static async getInitialProps({ query: { location } }) {
        let res
        if (process.env.MY_ENVIRONMENT === 'development') {
          res = await fetch(
            `http://localhost:3000/api/search?location=${location}`
          )

        } else if (process.env.MY_ENVIRONMENT === 'production') {
          res = await fetch (
            `https://productionurl.now.sh/api/search?location=${location}`
          )
        }
        const businesses = await res.json()
        return businesses
    }
...
}

edited Jan 13, 2018 at 19:36

answered Jan 13, 2018 at 4:32

NatKSS

1,3151 gold badge12 silver badges17 bronze badges

2 Comments

Bobby Over a year ago

While I believe that this should work, it isn't ideal for all situations - given that some NextJS applications may be deployed at the edge (using an edge runtime) that doesn't have the full NodeJS standard library (path, fs, etc.) and dotenv requires NodeJS compatibility on the backend to pull in the correct files.

NatKSS Over a year ago

That's a fair disadvantage that you've pointed out Bobby. The original upvoted answer should be more environment agnostic then.

Collectives™ on Stack Overflow

Conditional url based on NODE_ENV on Next.js

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related