title: Unable to use the server side props in Next JS while using the axios as middleware in the React Context
body: <p>I would like to get the request using the status side props in Next JS, however, I'm receiving an error that status code is not defines which I declared in the context api file.</p>
  <p><strong>This is from my client side next js page</strong></p>
  <pre><code> function Instructor({ courses }) {
    const router = useRouter();
    const { Meta } = Card;
  
  
    return (
      &lt;div className=&quot;overflow-hidden&quot;&gt;
        &lt;InstructorRoute&gt;
          &lt;h1 className=&quot;jumbotron square&quot;&gt;This is Instructor Dashboard&lt;/h1&gt;
          &lt;div class=&quot;row&quot;&gt;
            {courses &amp;&amp;
              courses.map((course, index) =&gt; {
                return (
                  &lt;div class=&quot;col-sm-4 scaling&quot;&gt;
                    &lt;Badge.Ribbon
                      text={course.published ? &quot;Published&quot; : &quot;Draft&quot;}
                      color={course.published ? &quot;green&quot; : &quot;gold&quot;}
                    &gt;
                      &lt;div class=&quot;card&quot;&gt;
                        &lt;div class=&quot;card-body&quot;&gt;
                          &lt;Link href={`/instructor/course/view/${course.slug}`}&gt;
                            &lt;a className=&quot;card-title text-black fw-bold&quot;&gt;
                              &lt;ReactMarkdown&gt; {course.name}&lt;/ReactMarkdown&gt;
                            &lt;/a&gt;
                          &lt;/Link&gt;
  
                          &lt;p class=&quot;card-text text-truncate&quot;&gt;
                            {course.description}
                          &lt;/p&gt;
                          &lt;img
                            style={{ cursor: &quot;pointer&quot; }}
                            onClick={(e) =&gt; {
                              e.preventDefault();
                              router.push(
                                `/instructor/course/view/${course.slug}`
                              );
                            }}
                            class=&quot;card-img-bottom  &quot;
                            height=&quot;200px&quot;
                            src={
                              course.image ? course.image.Location : &quot;/course.png&quot;
                            }
                            alt=&quot;Card image cap&quot;
                          /&gt;
  
                          &lt;hr className=&quot;fullWidth&quot; /&gt;
                          &lt;p class=&quot;mt-2 card-text&quot;&gt;
                            &lt;p class=&quot; fs-6 badge bg-warning&quot;&gt;
                              {course.lessons.length} Lessons
                            &lt;/p&gt;
                          &lt;/p&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/Badge.Ribbon&gt;
                  &lt;/div&gt;
                );
              })}
          &lt;/div&gt;
        &lt;/InstructorRoute&gt;
      &lt;/div&gt;
    );
  }
  export async function getStaticProps(context) {
    const { data } = await axios.get(&quot;/api/instructor-courses&quot;);
    // setCourses(data);
    console.log(data);
    return {
      props: {
        courses: data,
      },
    };
  }
  
  export default Instructor;
  </code></pre>
  <p><strong>This is from my context api page:</strong></p>
  <pre><code>  function Provider({ children }) {
    const router = useRouter();
    const [state, dispatch] = useReducer(rootReducer, initialState);
    useEffect(() =&gt; {
      dispatch({
        type: &quot;LOGIN&quot;,
        payload: JSON.parse(window.localStorage.getItem(&quot;user&quot;)),
      });
    }, []);
  
    axios.interceptors.response.use(
      (response) =&gt; {
        return response;
      },
      (err) =&gt; {
        let res = err.response;
        console.log(res);
        if (res.status === 401 &amp;&amp; res.config &amp;&amp; !res.config.__isRetryRequest) {
          return new Promise((resolve, reject) =&gt; {
            axios
              .get(&quot;api/logout&quot;)
              .then((data) =&gt; {
                console.log(&quot;401 error &gt; logout&quot;);
                dispatch({ type: &quot;LOGOUT&quot; });
                window.localStorage.removeItem(&quot;user&quot;);
                router.push(&quot;/login&quot;);
              })
              .catch((err) =&gt; {
                console.log(&quot;Error&quot;, err);
                reject(err);
              });
          });
        }
        return Promise.reject(err);
      }
    );
    useEffect(() =&gt; {
      async function getCsrfToken() {
        const { data } = await axios.get(&quot;/api/csrf-token&quot;);
        console.log(&quot;CSRF&quot;, data);
        axios.defaults.headers[&quot;X-CSRF-Token&quot;] = data.getCsrfToken;
      }
      getCsrfToken();
    }, []);
    return (
      &lt;Context.Provider value={{ state, dispatch }}&gt;{children}&lt;/Context.Provider&gt;
    );
  }
  export { Context, Provider };
  </code></pre>
  <p>This is my app.js page:</p>
  <pre><code>function MyApp({ Component, pageProps }) {
    return (
      &lt;Provider&gt;
        &lt;Nav&gt;&lt;/Nav&gt;
        &lt;ToastContainer
          theme=&quot;colored&quot;
          position=&quot;top-center&quot;
          limit={3}
          autoClose={1500}
        /&gt;
        &lt;Component {...pageProps}&gt;&lt;/Component&gt;
      &lt;/Provider&gt;
    );
  }
  </code></pre>
  <p><strong>This is the error that I'm receiving. However, the code works if I don't use server side rendering or static side rendering</strong></p>
  <pre><code>  Server Error
      TypeError: Cannot read property 'status' of undefined
      
      This error happened while generating the page. Any console logs will be displayed in the terminal window.
      Source
      context\index.js (39:14) @ eval
      
        37 | let res = err.response;
        38 | console.log(res);
      &gt; 39 | if (res.status === 401 &amp;&amp; res.config &amp;&amp; !res.config.__isRetryRequest) {
           |        ^
        40 |   return new Promise((resolve, reject) =&gt; {
        41 |     axios
        42 |       .get(&quot;api/logout&quot;)
  </code></pre>