title: Next JS - getStaticProps not returning anything
body: <p>I'm using Next.js with context API and styled components and I can't seem to get <code>getStaticProps</code> working.</p>
  <p>I have read other posts and often they talk about the custom <code>_app</code> which I do have but I never ran into the issue before using context API. I have also tried the <code>getInitialProps</code> function and to no avail.
  I should also note that even after not including the context wrapper I don't get a response from a function so I'm not at all sure of where to look.</p>
  <p>Here is my code. Can you see what's going on?</p>
  <pre><code>import React from 'react';
  import fetch from 'node-fetch';
  
  export default function Header(props) {
    console.log(props.hi);
    return &lt;div&gt;Hey dis header&lt;/div&gt;;
  }
  
  export async function getStaticProps(context) {
    return {
      props: {
        hi: 'hello',
      },
    };
  }
  </code></pre>
  <p>I have tried logging from the function but nothing is logging so I would imagine the problem is that the function isn't running for whatever reason.</p>
  <p>Heres my custom <code>_app</code> file</p>
  <pre><code>import { GlobalContextWrapper } from 'context';
  import Header from 'components/header/Header';
  import App from 'next/app';
  
  function MyApp({ Component, pageProps }) {
    return (
      &lt;GlobalContextWrapper&gt;
        &lt;Header /&gt;
        &lt;Component {...pageProps} /&gt;
        &lt;p&gt;footer&lt;/p&gt;
      &lt;/GlobalContextWrapper&gt;
    );
  }
  MyApp.getInitialProps = async (appContext) =&gt; {
    // calls page's `getInitialProps` and fills `appProps.pageProps`
    const appProps = await App.getInitialProps(appContext);
  
    return { ...appProps };
  };
  
  export default MyApp;
  </code></pre>
  <p>Here is my context file</p>
  <pre><code>import { useReducer } from 'react';
  import initialState from './intialState';
  import reducer from './reducer';
  import GlobalStyle from '../GlobalStyle';
  import theme from '../theme';
  import { ThemeProvider } from 'styled-components';
  
  export const GlobalContext = React.createContext();
  
  export function GlobalContextWrapper({ children }) {
    const [globalState, dispatch] = useReducer(reducer, initialState);
    return (
      &lt;GlobalContext.Provider value={{ globalState, dispatch }}&gt;
        &lt;GlobalStyle /&gt;
        &lt;ThemeProvider theme={theme}&gt;{children}&lt;/ThemeProvider&gt;
      &lt;/GlobalContext.Provider&gt;
    );
  }
  </code></pre>