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
- Create next.js project
- Install Dependencies: redux react-redux next-redux-wrapper redux-thunk
- Make Redux Boilerplate: Actions, Reducers, Action Creators
- Initialize store and Provide state in _app.js
- 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.
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
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.
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.
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:
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:
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:
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.
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.