条件 url 基于 NODE_ENV Next.js

Question

有没有办法根据我是在开发还是生产来设置url？

目前我有一个包含以下代码的组件：

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
    }
...
}

我想要一些可以让我执行以下操作的东西：

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
    }
...
}

Answer 1

是的，就像 alex bennett 评论的那样，使用 dotenv 应该适合您的情况！

要进行设置，

安装 dotenv 作为你的 Node.js 项目的依赖项 npm install dotenv --save 然后在你的应用程序中需要它 require('dotenv').config()
在项目的根目录中创建一个名为 .env 的文件，其中包含您在此 <NAME>/<VALUE> 中所需的环境变量此处格式：MY_ENVIRONMENT=production。
将 <VALUE> 更改为 production 如果您从托管服务器部署，或更改为 development 如果您正在从本地主机进行部署。
完成所有设置后，您可以非常轻松地检查代码中加载的环境变量，如下所示（来自您的示例）：

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
    }
...
}

Answer 2

您可以使用 NODE_ENV 环境变量来做到这一点。为了获得良好的开发人员体验，请像这样设置配置文件：

/config/index.js

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

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

然后您可以在整个应用程序的 getInitialProps 方法中使用它。

/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;
}

确保 NODE_ENV 变量设置在 package.json 构建脚本中，它应该看起来像这样。

package.json

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

Answer 3

这里有一个关于如何设置开发和生产的例子

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

条件 url 基于 NODE_ENV Next.js

Conditional url based on NODE_ENV on Next.js

javascript

node.js

next.js