[英]Conditional url based on NODE_ENV on Next.js
Is there a way for me to set an url based on whether I'm in development or production?有没有办法让我根据我是在开发还是生产中设置一个 url?
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
}
...
}
You can do that using the NODE_ENV
environment variable.您可以使用
NODE_ENV
环境变量来做到这NODE_ENV
。 For a nice developer experience, set up a config file like this:为了获得良好的开发人员体验,请设置如下配置文件:
/config/index.js /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.然后您可以在整个应用程序的
getInitialProps
方法中使用它。
/components/Search.js /组件/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
构建脚本中设置了NODE_ENV
变量,它应该看起来像这样。
package.json包.json
"scripts": {
"build": "NODE_ENV=production next build",
},
Yes, like what alex bennett has commented, using dotenv should work for your case!是的,就像亚历克斯贝内特所评论的那样,使用 dotenv 应该适用于您的情况!
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()
安装 dotenv作为对你的 Node.js 项目的依赖
npm install dotenv --save
然后在你的应用程序中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
.在您的项目的根目录中创建一个名为
.env
的文件,其中包含您需要的<NAME>/<VALUE>
格式的环境变量: 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.如果从托管服务器进行部署,请将
<VALUE>
更改为production
如果从本地主机进行部署,请将其更改为development
。
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
}
...
}
Here's an example on how to setup development and production这是一个关于如何设置开发和生产的示例
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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.