Next.js keep the state or send props when router.push

I'm new to Next.js and I am redirecting the user to next page using router.push

router.push("/terminal_summary");

My Redux state is empty on the next page, but I need the data I have in the state. How do I keep it or at least how can I send some props with router.state?

I tried router.push("/terminal_summary", undefined, { shallow: true }); but it doesn't work.

I have also tried:

router.push({
  pathname: '/terminal_summary',
  query: props.terminalPayload
})

But it sends data in query parameter.

The best thing would be to keep all the data in state or at least I want to be able to redirect with props.

EDIT:

On the next page I'm trying to access the Redux state using mapStateToProps

function mapStateToProps(state) {
  return {
    terminalPayload: state.terminalPayload,
  };
}

But this state after redirecting is showing initialState instead of the changes I have done on the previous page.

So the value is {} but it is supposed to be an object like below.

{
   merchant: [{ /*multiple objects*/ }],
   products: [{ /* multiple products*/}],
   // other data
}

Please note, this is currently not saved in the db and supposed to be saved on the next page where I want to show the summary then ask user to save.

Another note, I can see the data from Redux DevTools in Chrome but when I access on the page it is {}.

EDIT 2:

here is the complete redux code:

configureStore.js

export default (initialState) => {
  return createStore(
    rootReducer,
    initialState,
    composeWithDevTools(applyMiddleware(thunk, reduxImmutableStateInvariant()))
  );
};

reducers/index.js

const rootReducer = combineReducers({
  terminals,
  merchants,
  distributors,
  terminalPayload,
  roles,
  /* other reducers */
});

export default rootReducer;

initialState.js

export default {
  terminals: {
    imported: [],
  },
  merchants: [],
  distributors: [],
  terminalPayload: {},
  roles: [],
};

I'm using next.js so i have _app.js file where i have this code:

import configureStore from "../redux/configureStore";

function MyApp({ Component, pageProps }) {
  let state = {};
  const store = configureStore();

  return (
    <Provider store={store}>
      <Layout>
        <Component {...state} />
      </Layout>
    </Provider>
  );
}

then i have some actions and where is how i subscribe to it

terminal.js

const terminal = (props) => {
     const router = useRouter();
     /* functions */
     /* i have a function here that use router.push('terminal_summary') to redirect user to next page */
     return /* jsx */
}

function mapStateToProps(state) {
  return {
    terminals: state.terminals,
    terminalPayload: state.terminalPayload,
  };
}

function mapDispatchToProps(dispatch) {
  return {
    terminalActions: bindActionCreators(terminalActions, dispatch)
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(terminal);

terminal_summary.js

const terminalSummary = (props) => {
  const router = useRouter();


  return (
    /* jsx */
  );
};

terminalSummary.propTypes = {
  terminalPayload: PropTypes.object.isRequired,
};

function mapStateToProps(state) {
  return {
    terminalPayload: state.terminalPayload, // this object is empty here {} which is supposed to be same as i had on terminal.js page
  };
}

function mapDispatchToProps(dispatch) {
  return {};
}

export default connect(mapStateToProps, mapDispatchToProps)(terminalSummary);

i have been looking into this and im not sure if it is something related to this:

https://nextjs.org/docs/api-reference/data-fetching/getInitialProps https://github.com/kirill-konshin/next-redux-wrapper