URL de production pour nextjs

Question

J'utilise NextJs pour créer une application. J'ai deux URL différentes pour la production et le développement et je veux accéder à l'URL correspondante à l'environnement pour le client. J'ai suivi ce guide mais mon PROCESS.ENV.API_URL sur le développement est vide.

Voici mes fichiers:

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

}

l'environnement d'utilisation variable:

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

Espoir qui aide, Cheers!

Answer 1

vous avez dû installer le plugin oublièrent

simplement vous pouvez coller dans votre package fichier 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" 
    } 

et exécuter npm install

ou vous pouvez exécuter npm install babel-plugin-inline-dotenv babel-plugin-transform-inline-environment-variables --save -dev

OU Vous pouvez simplement réaliser cette fonction différemment selon cette guidez with-universal-configuration

.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/', 
} 

et JSON du paquet vous devez installer cinq babel-plugin-transform-define