v1.0.0 requires React v16.4.0 and React Redux v6.0 or later. If you are using React Redux v5, 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.

...
import { applyMiddleware, compose, createStore, combineReducers } from 'redux'
import { routerReducer, createRouterMiddleware, initialRouterState } from 'connected-next-router'
...
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 makeStore
export const makeStore = (initialState = {}, options) => {
  if (options.asPath) {
    initialState.router = initialRouterState(options.asPath);
  }

  return createStore(
    rootReducer,
    initialState,
    applyMiddleware(
      routerMiddleware,
      // ... other middlewares ...
    )
  );
}

Step 2

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

...
// pages/_app.js
import App, { Container } from 'next/app';
import { Provider } from 'react-redux'
import { ConnectedRouter } from 'connected-next-router'
...
class MyApp extends App {
  render() {
    const { Component, pageProps, store } = this.props;
    return (
      <Container>
        <Provider store={store}>
          <ConnectedRouter>
            <Component { ...pageProps } />
          </ConnectedRouter>
        </Provider>
      </Container>
    );
  }
}

Examples

• examples/basic - basic reference implementation

TODO

• Add unit tests
• Support Immutable.js

Acknowledgements

Acknowledge

License

MIT License