v3.0.0 requires Next.js 9 or newer, React Redux 7.1.0 or newer, and React 16.8.0 or newer. If you are using Next.js 7-8, check out v0 branch.

Connected Next Router

A Redux binding for Next.js Router compatible with Next.js.

Main features

✨ Keep Router state in sync with your Redux store.

🎉 Dispatch Router methods (push, replace, go, goBack, goForward, prefetch) using Redux actions.

🕘 Support time traveling in Redux DevTools.

🎁 Compatible with next-routes.

💎 Ease migration to next.js framework from codebases using connected-react-router or react-router-redux.

Installation

Using npm:

$ npm install --save connected-next-router

Or yarn:

$ yarn add connected-next-router

Usage

Step 1

• Add routerReducer to your root reducer.
• Use createRouterMiddleware if you want to dispatch Router actions (ex. to change URL with push('/home')).
• Use initialRouterState(url) to populate router state in the server side.

// store/configure-store.js
import { applyMiddleware, compose, createStore, combineReducers } from 'redux'
import { routerReducer, createRouterMiddleware, initialRouterState } from 'connected-next-router'
import { createWrapper } from 'next-redux-wrapper'

const rootReducer = combineReducers({
  ...reducers,
  router: routerReducer
});

const routerMiddleware = createRouterMiddleware();

/*
If you use next-routes, you have to import Router from your routes.js file
and create the router middleware as below:

const routerMiddleware = createRouterMiddleware({
  Router,
  methods: {
    push: 'pushRoute',
    replace: 'replaceRoute',
    prefetch: 'prefetchRoute',
  },
});
*/

// Using next-redux-wrapper's initStore
export const initStore = (context) => {
  const routerMiddleware = createRouterMiddleware()
  const { asPath, pathname, query } = context.ctx || Router.router || {};
  let initialState
  if (asPath) {
    const url = format({ pathname, query })
    initialState = {
      router: initialRouterState(url, asPath)
    }
  }
  return createStore(rootReducer, initialState, applyMiddleware(routerMiddleware))
}

export const wrapper = createWrapper(initStore)

Step 2

• Place ConnectedRouter as children of react-redux's Provider.

// pages/_app.js
import App from 'next/app';
import { ConnectedRouter } from 'connected-next-router'
import { wrapper } from '../store/configure-store'

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

// wrapper.withRedux wraps the App with react-redux's Provider
export default wrapper.withRedux(MyApp);

Examples

• examples/basic - basic reference implementation
• examples/typescript - typescript reference implementation
• without next-redux-wrapper

TODO

• Support Immutable.js

Acknowledgements

Acknowledge

License

MIT License