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.
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
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 projectsProp 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.
