Next JS - getStaticProps not returning anything

Question

I'm using Next.js with context API and styled components and I can't seem to get getStaticProps working.

I have read other posts and often they talk about the custom _app which I do have but I never ran into the issue before using context API. I have also tried the getInitialProps 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.

Here is my code. Can you see what's going on?

import React from 'react';
import fetch from 'node-fetch';

export default function Header(props) {
  console.log(props.hi);
  return <div>Hey dis header</div>;
}

export async function getStaticProps(context) {
  return {
    props: {
      hi: 'hello',
    },
  };
}

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.

Heres my custom _app file

import { GlobalContextWrapper } from 'context';
import Header from 'components/header/Header';
import App from 'next/app';

function MyApp({ Component, pageProps }) {
  return (
    <GlobalContextWrapper>
      <Header />
      <Component {...pageProps} />
      <p>footer</p>
    </GlobalContextWrapper>
  );
}
MyApp.getInitialProps = async (appContext) => {
  // calls page's `getInitialProps` and fills `appProps.pageProps`
  const appProps = await App.getInitialProps(appContext);

  return { ...appProps };
};

export default MyApp;

Here is my context file

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 (
    <GlobalContext.Provider value={{ globalState, dispatch }}>
      <GlobalStyle />
      <ThemeProvider theme={theme}>{children}</ThemeProvider>
    </GlobalContext.Provider>
  );
}

Answer 1

A solution based on your code is just getting data in your _app.js - getInitialProps and pass to the Header

function MyApp({ Component, pageProps }) {
  return (
    <GlobalContextWrapper>
      <Header data={pageProps.header}/>
      <Component {...pageProps} />
      <p>footer</p>
    </GlobalContextWrapper>
  );
}
MyApp.getInitialProps = async (appContext) => {
  // calls page's `getInitialProps` and fills `appProps.pageProps`
  const appProps = await App.getInitialProps(appContext);


  const headerData = ....

  return { ...appProps, header: headerData };
};

Answer 2

The issue was that i was not exporting this function from a page but instead a component and a custom app file.

Does anyone know a way i can get around this? The problem is that i have a header that gets data from a response and i want this header to be shown on every page without having to manually add it to each page along with repeating the getStaticProps function