How to set initial props , when using redux thunk in Next Js

Question

I have been working on Next js with redux. But not able to integrate redux with next js proper. I have checked many sites for the solution but could not find any. Here is my code

store.js

import { createStore, applyMiddleware, compose } from "redux"
import { createWrapper } from "next-redux-wrapper"
import rootReducer from "./rootReducer"
import {
    combineReducers,
    configureStore
  } from '@reduxjs/toolkit'
  import thunk from 'redux-thunk'

const middleware = [thunk]

const makeStore = () => createStore(rootReducer, compose(applyMiddleware(...middleware)))

export const store = configureStore({
    reducer: rootReducer,
    middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(thunk)
  })
  

export const wrapper = createWrapper(makeStore)

root_reducer.js

import { combineReducers } from 'redux'
import product from './product/slice'

const rootReducer = combineReducers({
  product: product
})

export default rootReducer

service.js

import { post, get, put, del, patch } from '../../utils/httpService';

const SERVICE_URLS = {
  getProductCategories: () => `/seller/product/categories/`,
};

export const getProductCategories = () => get(SERVICE_URLS.getProductCategories());

slice.js

import { createSlice, isPending, isRejected } from "@reduxjs/toolkit";

import {
    getProductCategories, 
} from "./thunk";

const thunks = [ getProductCategories];

const initialState = {
    status: "idle",
    errorMessage: '',
    data: [],
    categories: [],
};

export const slice = createSlice({
    name: "product",
    initialState,
    reducers: {},
    extraReducers: (builder) => {
        builder
            .addCase(getProductCategories.fulfilled, (state, action) => {
                state.status = "idle";
                state.categories = action?.payload;
            })
            .addMatcher(isPending(...thunks), (state) => {
                state.status = "loading";
            })
            .addMatcher(isRejected(...thunks), (state, action) => {
                state.status = "failed";
                state.errorMessage = action?.error?.message;
            });
    },
});

export const selectStatus = (state) => state.product.status === "loading";
export const selectCategories = (state) => state.product.categories;


export default slice.reducer;

Can someone please tell me how can I call "getProductCategories" within getInitialPros on the product page? Any help would be highly appreciated