Persisting State with Context API

Code snippet that uses the React Context API to persist state across different components in the Next.js application.
import React, { createContext, useContext, useReducer } from 'react';

// Define the context
const StateContext = createContext();
First, we import React and necessary hooks, then define the context using createContext.
const initialState = { /* initial state values */ };

function stateReducer(state, action) {
  switch (action.type) {
    // Handle different actions
      throw new Error(`Unhandled action type: ${action.type}`);
We define the initial state and the reducer which will handle the state changes based on dispatched actions.
export const StateProvider = ({ children }) => {
  const [state, dispatch] = useReducer(stateReducer, initialState);

  // The value prop is where we provide the state and dispatch function to the context
  return (
    <StateContext.Provider value={{ state, dispatch }}>
This component provides the context to its children. We use the useReducer hook to get the state and dispatch function and pass it down through the context.
export const useStateValue = () => useContext(StateContext);
Using this custom hook, components can easily access the state and dispatch function.
import { StateProvider, useStateValue } from './stateContext'; // assuming stateContext is the file we created above

// Wrap your Next.js app with StateProvider
function MyApp({ Component, pageProps }) {
  return (
      <Component {...pageProps} />

export default MyApp;
In the main app component, we wrap the entire app with the StateProvider so that state and dispatch can be accessed from anywhere within the app.
const SomeComponent = () => {
  const { state, dispatch } = useStateValue();

  // Use the context state and dispatch as needed
  return <div>{/* component code */}</div>;
In a component, we use useStateValue to access the state and dispatch function and then use these to manage or display the application state.