How to use getStaticProps in combination with useReducer and useContext - reactjs

Question

I am converting a React app to a NextJS app and cannot figure out how to use the props of getStaticProps into the initial state of my reducer inside my context.
In my current setup, my AppContext looks like this:
import { createContext, useReducer } from "react";
import { initialState, appReducer } from "../reducers/appReducer";
const AppContext = createContext();
const AppContextProvider = ({ children }) => {
const [state, dispatch] = useReducer(appReducer, initialState);
return (
<AppContext.Provider value={[state, dispatch]}>
{children}
</AppContext.Provider>
);
};
export { AppContext, AppContextProvider };
The I have my appReducer as follows:
export const initialState = {
example: null,
anotherExample: []
};
export const AppReducer = (state, action) => {
const { type, payload } = action;
switch (type) {
case "example_action":
return {...state, example: payload.example }
}
default:
return state;
}
What I do not understand is how I can get the props of getStaticProps in the initial state of my reducer (since my whole application is based on this context with reducer).
ExamplePage (pages/example-page.js)
export default function ExamplePage({ data }) {
const [state, dispatch] = useReducer(appReducer, {
...initialState,
example: data.example
});
return (
<AppContext.Provider value={[state, dispatch]}>
<div>...</div> // Rest of my application
<AppContext.Provider>
);
}
export export async function getStaticProps() {
const { data } = // Fetching my data ....
return {
props: {
data: data,
},
};
}
What I tried to do is move the reducer out of the AppContext, so I can pass the props from getStaticProps to it, but then I cannot use the AppContext including my reducer anymore in other places in my application. Or should I create my context like this:
AppContext.js
import { createContext } from "react";
const AppContext = createContext();
// Don't create my provider here, do it in ExamplePage?
export default AppContext;
And import this everywhere I want to use this context and create the provider inside my ExamplePage only?
I have the feeling I do not understand the concept of context, reducer with NextJS, is that true?

Answer 1

I didn't fully understand what exactly you want to achieve, but I think you're using contexts in the wrong place.
If, as I understand it, your whole React application was wrapped in a Context Provider, and you want to repeat this in nextjs, the _app.js file is best suited for this. This is a special file in nextjs, more about it here: https://nextjs.org/docs/advanced-features/custom-app, if you don't have it, you need to create it in the pages folder.
In your case it will be something like this:
// ./pages/_app.js
const AppContext = createContext();
export default function MyApp({ Component, pageProps }) {
const [state, dispatch] = useReducer(appReducer, initialState);
return(
<AppContext.Provider value={[state, dispatch]}>
<Component {...pageProps} />
</AppContext.Provider>
)
}
The _app.js is a special file in nextjs, all pages of your site will be wrapped in it, you can use this for your global states, they will not be reset when the user navigates through the pages of the site.
getStaticProps is designed for a completely different purpose, getStaticProps is designed to process data for a specific page, and not for all pages of the site.