Skip to content
This repository has been archived by the owner. It is now read-only.
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


This project is no longer maintained!

Because next.js has grown massively and other packages with better support have covered the redux-saga SSR functionality. See #79 for more information.

npm version npm downloads XO code style styled with prettier Build Status All Contributors

redux-saga HOC for Next.js. controlled redux-saga execution for server side rendering.

Attention: Synchronous HOC is no longer supported since version 4.0.0!


yarn add next-redux-saga

Getting Started

Check out the official Next.js example or clone this repository and run the local example.

Try the local example

  1. Clone this repository
  2. Install dependencies: yarn
  3. Start the project: yarn start
  4. Open http://localhost:3000


next-redux-saga uses the redux store created by next-redux-wrapper. Please refer to their documentation for more information.

Configure the Store wrapper

import {applyMiddleware, createStore} from 'redux'
import createSagaMiddleware from 'redux-saga'
import {createWrapper} from 'next-redux-wrapper'

import rootReducer from './root-reducer'
import rootSaga from './root-saga'

const makeStore = context => {
  const sagaMiddleware = createSagaMiddleware()
  const store = createStore(

  store.sagaTask =

  return store

const wrapper = createWrapper(makeStore)

export default wrapper

Configure Custom _app.js Component

import React from 'react'
import App from 'next/app'
import withReduxSaga from 'next-redux-saga'

import wrapper from './store-wrapper'

class ExampleApp extends App {
  static async getInitialProps({Component, ctx}) {
    let pageProps = {}

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)

    return {pageProps}

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

export default wrapper.withRedux(withReduxSaga(ExampleApp))

Connect Page Components

import React, {Component} from 'react'
import {connect} from 'react-redux'

class ExamplePage extends Component {
  static async getInitialProps({store}) {
    store.dispatch({type: 'SOME_ASYNC_ACTION_REQUEST'})
    return {staticData: 'Hello world!'}

  render() {
    return <div>{this.props.staticData}</div>

export default connect(state => state)(ExamplePage)


Brent Mealhouse
Brent Mealhouse

💻 ⚠️ 📖 🚧 💬
Timon Borter
Timon Borter

💻 ⚠️ 📖 🚧 💬
Artem Abzanov
Artem Abzanov

💻 ⚠️ 📖
Robbin Habermehl
Robbin Habermehl

💻 ⚠️ 📖


  1. Fork this repository to your own GitHub account and then clone it to your local device
  2. Install the dependecies: yarn
  3. Link the package to the global module directory: yarn link
  4. Run yarn test --watch and start making your changes
  5. You can use yarn link next-redux-saga to test your changes in an actual project


This project is licensed under the terms of MIT license. See the license file for more information.