How to do Routing with redux-saga in Next.js app

Question

I'm trying to migrate my react app to next.js app.

1. I like redux-saga
2. I like routing in redux-saga logic
3. And I want to do routing in redux-saga logic as I used to do!

but I cannot figure out how to do this. question is..

1. How to route with redux-saga logic in Next.js?
2. Is this bad practice doing this? I think putting routing logic on saga seems more reasonable. But I think it is not a popular way. Why it is not used by many people?

To help understanding my situations. I usally do routing in react app like below

one of my saga logic as example

export function* deletePost(action) {
  const { postId } = action;
//delete post 
  yield api.postApi.deletePost(postId);
//route page to home ("/")
  yield put(actions.router.push("/"));
}

I used 'connected-react-router' to do this. and actions.router is exported from below file.

import { routerActions as router } from "connected-react-router"
export { router }

And below is how I configured my redux store

import { applyMiddleware, compose, createStore } from "redux";
import createSagaMiddleware from "redux-saga";
import { routerMiddleware } from "connected-react-router";
import { createBrowserHistory } from "history";
import { composeWithDevTools } from "redux-devtools-extension";

import { createRootReducer } from "data/rootReducer";
import rootSaga from "data/rootSaga";

const history = createBrowserHistory();
const sagaMiddleware = createSagaMiddleware();
const rootReducer = createRootReducer(history);

const env = process.env.NODE_ENV;
let composeFn = composeWithDevTools;
if (env === "production") {
  composeFn = compose;
}
export default function configureStore() {
  const store = createStore(
    rootReducer,
    composeFn(applyMiddleware( sagaMiddleware, routerMiddleware(history)))
  );

  sagaMiddleware.run(rootSaga);

  return { history, store };
}