The way of managing the state in Next.js

State management plays a vital role in any modern web application. State management in Next.js refers to the ability of a Next.js application to store and access data in a readily accessible manner.

In this article, we are going to discuss different state management methods that we can use with a Next.js web app I will give a practical example for each method so you can evaluate them better.

Let's look into Next.js file structure

First we should understand the Next.js file structure, it enables us to understand the to store and manage the state throughout the entire application.

A new Next.js application consists of a pages, style and public folders. Inside the pages folder, which we will concentrate on in this article, we have two files: the index.js and the _app.js file, and an api folder. The _app.js file holds all globally accessible components, while the api folder contains the app’s API endpoint.

Three most common ways of managing the state in Next.js is using
1. useState hook
2. useReducer hook
3. useContext hook

useState hook to manage the state in Next.js

The useState hook is the most famous and widely used. It allows you to keep track of the state of functional components. The useState hooks take any data type and hold a single value.

The useState hook that we discuss above initialize the state by calling it in the function component: the useState returns two values and the initial state, which is set to zero (0). The two values are the current state and a function that updates the state.

Here, in the above picture, The addCount function which uses the state function updater to increase the initial value of the state by 1. We passed that function to the button as an onClick event whenever the button gets clicked.

Understanding the useReducer hook

The next hook that we are about to discuss is useReducer hook. The useState hook is most commonly used for managing simple states, while useReducer hook is used for more complex state logic and management.

We are going to create an application that lets you add the currently active result by 2. Place the following code in _app.js file

We imported the useReducer Hook first. We provided the reducer function and the initial state. The Hook then returned an array of the current state and the dispatch function.

We provided the dispatch function to the onClick event so that the current state value gets added by 2 each time the button is clicked, setting it to the following values: 4, 6, 8, 10, 12, and so on.

The context API hook for complex state

The hooks we discussed above is great and nice. But the drawback of using the above hooks is prop drilling, especially in big projects

Prop drilling is the expression given to the process of sending data or props down through many layers of nested children components from a high-level component to a lower-level component. Prop drilling is acceptable in smaller projects but can quickly become laborious in more significant and massive projects because of repeated code.

To overcome the prop drilling issue, React team introduced the Context API in React in React 16.3 to combat this prop drilling issue without installing external state managements like Redux.

The Context API provides all the values that need to be transmitted globally so that it is accessible to many components at different nested levels.The Context API returns a provider and a consumer. The provider provides the state. It will hold the state and act as a parent while The consumer uses the state.

Context API can be used by following the steps below:

• Create a separate folder in the root directory and create a file with the name of your choice inside.
• Import the createContext inside

• Now we will create the Provider

• We wrap the provider around the entire app so that we can use the state provided by context API throughout the application.

In this blog, we have explained 3 different ways how we manage the state in Next.js. In each case, we have implemented different state management solutions, but the great challenge in picking the most suitable state management solution is the capability to identify what states you need to track.