0
私はNextJsを使ってアプリケーションを構築しています。私は生産と開発のために2つの異なるURLを持っており、クライアントの環境に対応するURLにアクセスしたいと思います。私はこれに続いてguideしかし、私のPROCESS.ENV.API_URLの開発は空です。ここでnextjsの制作URL
は、私のファイルは、以下のとおりです。
.env:
API_URL=https://my-staging-url.com
.env.production:
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 })
};
希望、乾杯のに役立ちます!