nextjs 的生产 URL

Question

我正在使用NextJs构建一个应用程序。我有两个不同的用于生产和开发的 URL，我想访问客户端环境的相应 URL。我遵循了本指南，但我的 PROCESS.ENV.API_URL 开发是空的。

这是我的文件：

.env：

API_URL=https://my-staging-url.com

.env.生产：

API_URL=https://my-production-url.com

.babelrc：

{
  "presets": [
    "next/babel"
  ],
  "env": {
    "development": {
      "plugins": ["inline-dotenv"]
    },
    "production": {
      "plugins": ["transform-inline-environment-variables"]
    }
  }

}

环境变量用法：

import 'isomorphic-fetch';

export const SET_QUERY = 'SET_QUERY';
export const CLEAR_SEARCH = 'CLEAR_SEARCH';
export const START_FETCHING_SEARCH = 'START_FETCHING_SEARCH';
export const SET_SEARCH_RESULTS = 'SET_SEARCH_RESULTS';
export const FETCHING_SEARCH_FAILED = 'FETCHING_SEARCH_FAILED';

export const getSearch = value => {
    const url = `${process.env.API_URL}search?q=${value}`; // THIS IS EMPTY
    console.log(url);
    return fetch(url);
};

// Implement search action
export const doSearch = query => dispatch => {
    dispatch({ type: START_FETCHING_SEARCH });
    return dispatch => {
        return getSearch(query).then(response => {
            dispatch({ type: SET_SEARCH_RESULTS });
        }, () => {
            dispatch({ type: FETCHING_SEARCH_FAILED });
        });
    };
};

export const clearSearch = () => dispatch => {
    return dispatch({ type: CLEAR_SEARCH })
};

希望有帮助，干杯！

Answer 1

你一定是忘记安装插件了

只需将其粘贴到您的包 json 文件中：

"dependencies": {
    "next": "latest",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "babel-plugin-inline-dotenv": "^1.1.1",
    "babel-plugin-transform-inline-environment-variables": "^0.1.1"
  }

并运行 npm install

或者你可以运行 npm install babel-plugin-inline-dotenv babel-plugin-transform-inline-environment-variables --save -dev

或者您可以按照本指南使用通用配置以不同方式实现此功能

.bablerc

{
"plugins":[
    ["transform-define", "./env-config.js"]
]
}

.env-config.js

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

module.exports = {
    'process.env.API_URL': prod ? 'http://api.dev.com' : 'http://api.local.com/',
}

在 json 包中你应该安装babel-plugin-transform-define