The simple way to set up Redux with Next.js + Redux Debugger

Next.js is great not only for building SEO friendly blogs but also for the development of the Web Applications. Often web application needs a global state across all of the components, for example, JWT Authentication. In this case, Redux will be handy, but there some differences between setting up in Next.js and CRA.

So I will show you how to make minimal Redux setup with Redux Debugger and Redux Thunk in your Next.js Project

Bird-eye overview of the steps

1. Create next.js project
2. Install Dependencies: redux react-redux next-redux-wrapper redux-thunk
3. Make Redux Boilerplate: Actions, Reducers, Action Creators
4. Initialize store and Provide state in _app.js
5. Setup redux-thunk for async actions and Redux Debugger

Below I describe how to setup redux with next.js on the example of a simple counter app. This tutorial is about how to use redux with next.js, so I won’t get too deep into the redux details.

Setting up next.js project

Let’s create a default next.js project using create-next-app.

npx create-next-app redux-next-app

As a result of installation you will see this folder structure:

This is a basic next.js setup. I will create the folder src and move folders pages and components inside of it. It is just my personal preference to keep the project organized.

Installing Dependencies

To use redux in our project we need packages: redux and react-readux. Plus to make it working with Next.js we going to use the package next-redux-wrapper. To make redux working with async actions I will install redux-thunk .

npm i --save redux react-redux next-redux-wrapper redux-thunk

or

yarn add redux react-redux next-redux-wrapper redux-thunk

Redux boilerplate setup

Lets now set up a classical redux folder structure for our counter project. If you are familiar with redux basics you can skip this section and move to the Store Initialization. Since this step is identical to the redux setup in the CRA project. It shows simple state management on the example of the counter app.

Actions

Create a folder named store where we will put all our redux logic. Then create a folder actions where we will store our action types and action creators. Inside actions folder, create a file actionTypes.js with this content:

These are our actions types.

Action creators

After action types, we need to create action creators. Action Creators help us to standardize action dispatching and avoid code duplication. So we create a file called counter.js inside of the actions folder with this content:

Reducer

When you created actions and action creators you need to set up Reducer which will transform our state. Create a folder reducer inside of the folder store. Inside reducer folder create file counter.js with this content:

Root Reducer

Now you need to create a root reducer. Root Reducer is the place where we are going to combine all of our reducers. Now we have only one and it seems overkill. But when you have several reducers it helps a lot in code organization.

Inside of the reducer folder create a file index.js with this content:

Store initialization with redux-thunk and Redux Debugger

This step is the main difference between setting up Redux in Next.js and CRA. We need to create a function that will take care of store initialization and applying middleware.

Let’s create a file index.js inside of store folder. Inside of the file we need to create a function for the store initialization. This function takes two parameters initialState and options. Property options.isServer tells us whether this function runs on the server-side or the client-side. We need to know this since debugger is initialized via a property of the object window which exists only on the client-side.

The final setup is to pass the store to the Redux Provider. To have redux across all our components we need to initialize it in the _app.js file. This a place where all our page components are rendered.

In _app.js we import withRedux to use redux with nextjs. And also we import initStore function where we initialize our store and apply middleware.

Final folder structure

Congratulations! You made it!

Now launch a dev server by running npm run dev and test how everything works. Then open the app in a browser and open Redux Debugger. (You need to install Redux DevTools extension before) If you see @@INIT event, it is mean that everything works.

Dispatching actions and working with State

Now you can use Redux with Next.js as we normally do with CRA. Below I show a counter which demonstrates the usage of the Redux.

This is content of the index.js file:

Result

Demo Next.js with Redux, Redux Thunk, and Redux Debugger

I hope this tutorial helped you to set up a Redux, Redux Tunk and Redux Debugger in your Next.js Project. If you have any questions, feel free to contact me.

References

You can find a full code of this project in this GitHub Repo https://github.com/VladymyrPylypchatin/nextjs-redux-boilerplate

---

Thanks for reading! :)

I am Vova Pilipchatin, a freelance Software Engineer. I am developing a Web Application, learning how to launch successful SaaS projects and learn how to build a freelance business.

If something sounds like you too, subscribe to me to get more posts like this.