title: Axios custom instance not working properly with next JS
body: <p>So firstly i create custom axios instance with baseurl and export it like this:</p>
  <pre><code>import axios from 'axios';
  
  const instance = axios.create({
    baseURL: process.env.BACKEND_URL,
  });
  
  instance.defaults.headers.common['Authorization'] = 'AUTH TOKEN';
  instance.defaults.headers.post['Content-Type'] = 'application/json';
  
  export default instance;
  </code></pre>
  <p>The problem is in my saga or in any component in general (ONLY client side) when importing this custom axios instance. I use next-redux-wrapper, and when i prefetch data (using getStaticProps) for my component everything works fine and the axios.defaults.baseURL property works just fine.
  However the problem is on client-side, whenever i import the same axios instance in any component or in saga but i call it from lets say componentDidMount, the same axios.default.baseURL is undefined, so if i want to make get request i have to type in the full backend + queries URL. What could the problem be? EXAMPLE:</p>
  <pre><code>export function* fetchTPsSaga() {
    try {
      console.log(axios.defaults.baseURL); 
      const url = `/training-programs`;
      const res = yield axios.get(url);
      const tPs = res.data.data;
      yield put(fetchTrainingProgramsSuccess(tPs));
    } catch (err) {
      yield put(fetchTrainingProgramsFail(err));
    }
  }
  </code></pre>
  <p><strong>// The first time it renders (on server side), it's the valid baseURL property, however if i call the same saga from client-side (when component is rendered) it's UNDEFINED, so i have to type the full url</strong></p>