Adding kepler.gl to a nextjs application
Tags: react, nextjs, redux, keplergl
Published: 2023-04-07 22:10:22

Step by step guide for adding [kepler.gl](https://github.com/keplergl/kepler.gl) to nextjs app

Please notice that the final code is available [here](https://github.com/shahab65/next-kepler-gl)

First we create a new project with nextjs:

```
npx create-next-app next-kepler-gl   
cd next-kepler-gl
```
Now we install packages:

```
 yarn add kepler.gl styled-components redux react-redux
```
Then open the project in your code editor and create `store/index.js` file in the root of your project and put this code in it:

```js
import keplerGlReducer from "kepler.gl/reducers";
import {createStore, combineReducers, applyMiddleware} from "redux";
import {taskMiddleware} from "react-palm/tasks";

const reducers = combineReducers({
  keplerGl: keplerGlReducer,
});

const store = createStore(reducers, {}, applyMiddleware(taskMiddleware));
export default store;

```
Now let's create our `Map` component in `pages/Map.jsx`:
```jsx
import React from "react";
import KeplerGl from "kepler.gl";
import {ReactReduxContext} from "react-redux";

const Map = () => {
  return (
    <ReactReduxContext.Consumer>
      {({store}) => (
        <KeplerGl
          id="map"
          width={window.innerWidth}
          mapboxApiAccessToken={
            "put your token here"
          }
          height={window.innerHeight}
          store={store}
        />
      )}
    </ReactReduxContext.Consumer>
  );
};

export default Map;
```
Please notice that you need to put your own [Mapbox access token](https://docs.mapbox.com/help/glossary/access-token/) in the above code and you probably want to read it from  [environment variables](https://nextjs.org/docs/basic-features/environment-variables).

Now let's go to `pages/index.js` and create  our redux wrapper and use our Map component.
So in `pages/index.js`:
```jsx
import dynamic from "next/dynamic";
import {Provider as ReduxProvider} from "react-redux";
import store from "../store";

const DynamicMap = dynamic(() => import("./Map"), {
  ssr: false,
});

export default function Home() {
  return (
    <div>
      <ReduxProvider store={store}>
        <DynamicMap />
      </ReduxProvider>
    </div>
  );
}

```
If you have any question about dynamic import and turning the ssr off please see [nextjs docs](https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr)

Now we can run our project:
```
yarn dev
```
This should work and if it is working for you so you are good to go and you don't need to continue reading but I'm getting this error:
```
error - unhandledRejection: Error [ReferenceError]: ReadableStream is not defined
    at onShellReady
```
According to [this github issue](https://github.com/keplergl/kepler.gl/issues/1802):

> Kepler.GL is not compatible with react 18, So I had to downgrade my React version and as the latest version of Next.JS requires React 18, so I had to downgrade the Next.JS version as well.

So we need to do this:

```
yarn remove react react-dom next
```
and then
```
 yarn add react@17.0.2 react-dom@17.0.2 next@11.1.4
```
Now if we run project again we should see this:

![kepler gl view ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3j4g5225zkp34o26yyzz.png)

Thanks for reading
ps: If you have any suggestion instead of downgrading react, react-dom and nextjs please share it in the comments