A Redux binding for Next.js Router compatible with Next.js.
✨ 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.
Using npm:
$ npm install --save connected-next-router
Or yarn:
$ yarn add connected-next-router
- Add
routerReducerto your root reducer. - Use
createRouterMiddlewareif you want to dispatch Router actions (ex. to change URL withpush('/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();
// Using next-redux-wrapper's makeStore
export const makeStore = (initialState = {}, options) => {
if (options.isServer) {
initialState.router = initialRouterState(options.asPath);
}
return createStore(
rootReducer,
initialState,
applyMiddleware(
routerMiddleware,
// ... other middlewares ...
)
);
}- Place
ConnectedRouteras children ofreact-redux'sProvider.
...
// 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/basic - basic reference implementation
- Add unit tests
- Support Immutable.js
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent