How to dispatch an action in next.js getStaticProps

Question

I am new to NextJs. I want my component to load after an API call resolves & I want to store the response of this API call in the redux store.

Here is my component :-

const BlogPage = () => {
  return <p>Blogs</p>;
};

export const getStaticProps = async () => {
  const dispatch = useDispatch();
  const nuggetList = await dispatch(getNuggetsList());
  return {
    props: {
      nuggetList,
    },
  };
};

Action.js :-

import axios from "axios";
export const GET_NUGGET_LIST = "GET_NUGGET_LIST";

export const getNuggetsList = () => {
  return async (dispatch) => {
    const res = await axios.get("/blog/nuggets").catch((error) => {
      throw error;
    });
    dispatch({ type: GET_NUGGET_LIST, payload: res.data });
    return res;
  };
};

Reducer.js :-

import { GET_NUGGET_LIST } from "./action";

const initialState = [];

export const NuggetList = (state = initialState, action) => {
  switch (action.type) {
    case GET_NUGGET_LIST:
      return { ...state, nuggetList: action.payload };
    default:
      return state;
  }
};

The problem is that :-

1. API Request is not being made
2. When I hover over await statement in Component page, it says await has no effect on the type of this expression

Any suggestions?

Answer 1

GetStaticProps runs only on the server-side, that's why your redux logic won't work. You can either dispatch the data when you initialize the redux store in the _app page using next-redux-wrapper