Next, Redux and Kepler.js and Deck.GL

Question

I'm trying to include kepler.js into my webapp. As such I've also begun to include Redux, which is a requirement for Kepler.

I want to ensure I am not losing the benefit of next.js by using react, so that I am still loading static pages where redux is not needed, and SSR and everything else is still working correctly.

Using next-redux-wrapper I've implemented the example from the documentation, and then tried to implement the kepler redux example as below (combining both).

   //for kepler.gl
import {createStore,combineReducers,applyMiddleware, AnyAction} from 'redux';
import {MakeStore, createWrapper, Context, HYDRATE} from 'next-redux-wrapper';
import keplerGlReducer from 'kepler.gl/reducers';

//for kepler
import {taskMiddleware} from 'react-palm/tasks';


// export interface State {
//     tick: string;
// }


const base = (state = {tick: 'init'}, action) => {
    switch (action.type) {
        case HYDRATE:
            return {...state, ...action.payload};
        case 'TICK':
            return {...state, tick: action.payload};
        default:
            return state;
    }
};



//needs to be updated


const reducer = combineReducers({
  // <-- mount kepler.gl reducer in your app
  keplerGl: keplerGlReducer,

  // Your other reducers here
  app: base
});



// create a makeStore function
const makeStore = context => createStore(reducer,applyMiddleware(taskMiddleware));

    // const makeStore = (context: Context) => createStore(reducer,applyMiddleware(taskMiddleware));

// export an assembled wrapper
export const wrapper = createWrapper(makeStore, {debug: true});

This __app.js

import React from 'react'
import App from 'next/app'
import {wrapper} from '../redux/store';

import '../css/tailwind.css'

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props
    return <Component {...pageProps} />
  }
}

export default wrapper.withRedux(MyApp);


// export default MyApp

With this component for an example map

import KeplerGl from 'kepler.gl';
const TOKEN = 'pk.eyJ1IjoibWVlaGF3bCIsImEiOiJja2JqNWF2cDUwandnMnF0ZGdjY2hzdGM3In0.62pru3Sdn6H8KvRcUrlRTw'; // Set your mapbox token here


export default function Kepler(){


return (
<div>
<KeplerGl
      id="foo"
      mapboxApiAccessToken={TOKEN}
      width={1920}
      height={1080}/>
</div>
)
}

I want to ensure that I am not removing SSR from my next.js config, and for some reason when I am loading the kepler page, I am unable to load in csv data without the page dying.

I will be leveraging Deck.gl as well and want to ensure that using next.js is going to be the correct option.

Appreciate any help and guidance in getting this right.

For reference,

https://github.com/kirill-konshin/next-redux-wrapper https://docs.kepler.gl/docs/api-reference/get-started