title: NextJs Middleware and redux store
body: <p>I would like to check what's inside my redux store from NextJs middleware.</p>
  <p>I couldn't find a solution, and the better i achieved is the following:</p>
  <p>I've started with the [NextJs-with-redux-saga]example(<a href="https://github.com/vercel/next.js/tree/canary/examples/with-redux-saga" rel="nofollow noreferrer">https://github.com/vercel/next.js/tree/canary/examples/with-redux-saga</a>)</p>
  <p>and to access the store SSR I had to use a <a href="https://github.com/kirill-konshin/next-redux-wrapper" rel="nofollow noreferrer">library</a>. Current store.js content is like this</p>
  <pre><code>import { createStore, applyMiddleware } from 'redux';
  import { composeWithDevTools } from 'redux-devtools-extension';
  import { HYDRATE, createWrapper } from 'next-redux-wrapper';
  import rootReducer from './reducers/rootReducer';
  import createSagaMiddleware from 'redux-saga';
  import rootSaga from './sagas/rootSaga';
  
  const sagaMiddleware = createSagaMiddleware();
  
  const reducer = (state, action) =&gt; {
      if (action.type === HYDRATE) {
          // Merge any state which can be set in SSR here
          const nextState = {
              ...state,
              tick: {
                  ...action.payload.tick,
              },
          };
          return nextState;
      } else {
          return rootReducer(state, action);
      }
  };
  
  const initStore = () =&gt; {
      console.log('here');
      const store = createStore(reducer, composeWithDevTools(applyMiddleware(sagaMiddleware)));
      sagaMiddleware.run(rootSaga);
      return store;
  };
  
  export const nextStore = createWrapper(initStore);
  </code></pre>
  <p>I've then created a middleware under the pages directory as per doc</p>
  <pre><code>import { NextResponse } from 'next/server';
  
  const middleware = (req, ev) =&gt; {
    return NextResponse.next();
  };
  
  export default middleware;
  </code></pre>
  <p>This clearly wasn't enough since i need access to the store.
  The library I picked has no solution for accessing the store on the middleware, so i tried to hack around by using the <code>getServerSideProps</code> one.</p>
  <pre><code>import { NextResponse } from 'next/server';
  import { nextStore } from '@store/store';
  
  export const middleware = nextStore.getServerSideProps((store) =&gt; async ({ req, query, res }) =&gt; {
      const { tick } = store.getState();
      console.log(tick;
      return NextResponse.next();
  });
  
  </code></pre>
  <p>somehow it does work and i can see the store, but some errors is prompted</p>
  <blockquote>
  <p>error - TypeError: result.response.headers is not iterable</p>
  </blockquote>
  <blockquote>
  <p>./node_modules/react/cjs/react.development.js<br />
  <code>eval</code> not allowed in Middleware pages/_middleware</p>
  </blockquote>
  <p>Was anyone able to achieve this?</p>