![next-js-redux.png](https://blog.radicalloop.com/uploads/next_js_redux_70d131b3cc.png)

[Next.js](https://nextjs.org/) is awesome library for SSR(Server Side Rendering). We are developing our website with [strapi](https://strapi.io/) and [Next.js](https://nextjs.org/).

So, We wanted to use redux in Next.js project. Setup is easy but after redux setup, **“getInitialProps”** method stopped working for pages.

We did research on that and found out solution for it. Basically, we had to overwrite “App” component from Next.js.

To overwrite “App” component from Next.js, you would require to create “_app.js” file. Here it is.

```javascript
import React from 'react'
import { Provider } from 'react-redux'
import withRedux from 'next-redux-wrapper'
import { initStore } from '../store/store'
import App from 'next/app';

const MyApp = props => {
  const { Component, pageProps, store } = props
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  )
}

MyApp.getInitialProps = async (appContext) => {
  // calls page's `getInitialProps` and fills `appProps.pageProps`
  const appProps = await App.getInitialProps(appContext);

  return { ...appProps }
}

export default withRedux(initStore)(MyApp)
```

And now, `getInitialProps` method should call and you’ll get store in the method. Checkout index.js page.

```javascript
import withLayout from "../components/Layout";
import HomeComponent from "../components/home/Home";
import { addHomePage } from '../store/pages/action';
import api from '../api';

let Index = (props) => <HomeComponent {...props} />;

Index.getInitialProps = async ({ store, isServer }) => {
  let homePage = store.getState().pages.homepage;

  if (Object.keys(homePage).length === 0) {
    const { data } = await api.get('pages/homepage');
    homePage = data;
    store.dispatch(addHomePage(homePage));
  }

  return { homePage }
}

export default withLayout(Index);
```

Cool, now you you can leverage the power of redux and next.js both in our Next application.???

...

Follow **RadicalLoop** on [Twitter](https://twitter.com/radicalloop), [Facebook](https://www.facebook.com/radicalloop/). ?

large_next-js-redux.png

Setup Next.js with Redux ?

Radicalloop