Using Redux in Next.js with Hybrid Static/Server Rendered Applications

Next.js 9 brought in automatic partial static export that automatically determines if pages can be rendered statically. To make the most of this, you can’t use the widely used Redux wrapper so here is how you can setup without this.

I should mention before you start this tutorial that the Redux wrapper was created for a specific purpose, so that actions are consistently dispatched on all pages on client and on server. So if you need that functionality, then you should continue to use it. This tutorial is for sites that always dispatch on the client side.

Why would you need a hybrid application? This was the case for me because I had a Shopify application with the server dealing with initially authorising my application and any AJAX API requests.

So the most important thing to make sure that your pages can be statically rendered is to remove any calls to getInitialProps in all pages. Before I switched to Next.js 9, I had used this in pages to get query parameters. Here is how you can get query parameters using useRouter:

Ok, now onto our _app.js file. This is the example given for using the Redux wrapper. You’ll have a createStore function, default state, reducer and actions. Really you should have these all neatly in separate folders and files. But here I’ll just work from the example and show how you would change them around to work without this wrapper.

Firstly, make sure that you have redux and react-redux installed and saved into your project dependencies.

npm install — save redux react-redux 

Using the example above, we can remove the withRedux import, remove the whole getInitialProps section and add in the store variable. I removed the reducer too and put it in a separate file.

store = makeStore()

Then we remove the export default withRedux statement at the end and simply export our app.

Here is the reducers file, I’ve changed it from the FOO example to a simple modal example so that it makes a little more sense.

Now we’ve removed the wrapper, it means that we have to deal with connecting components using the Redux connect function, as we would with any other React project. I’m not going into depth with how Redux works here as this tutorial is assuming that you already understand the concepts, but it accepts 4 parameters:

1. mapStateToProps — this is used to pass the state as props down to the component. You either supply a function or you pass null or undefined if you do not wish it to subscribe to store updates. One thing to note is that even though you might be used to using the spread operator, you should only return new objects if needed to avoid unnecessary re-renders
2. mapDispatchToProps — this is used create props that will map to dispatch actions to update the state.
3. mergeProps — this isn’t used that often, if you leave it blank it will combine the components ownProps, mapStateToProps and mapDispatchToProps. If you want to be more specific with the props returned you can pass a function. There is a great post here explaining why mergeProps may be useful.

It’s normally the best practice to create a container element that will pass the state to the child props rather than connecting every component. For this I’m going to show a very simple modal component example:

Here is the actions file

Now when you run next build (usually triggered with npm run build, depending on your setup) you will see that if you’ve successfully removed all calls to getInitialProps that pages are generated as static pages