Overview: Managing Local and Global States in Next.js

Introduction

State management is one of the central parts of any React application, Next.js apps included. When talking about state, we refer to those dynamic pieces of information that allow us to create highly interactive user interfaces (UIs), making our customers’ experience as beautiful and enjoyable as possible.

Understanding State in Modern UIs

Thinking about modern websites, we can spot state changes in many parts of the UI: switching from light to dark theme means that we’re changing the UI theme state, filling an e-commerce form with our shipping information means that we’re changing that form state, even clicking on a simple button can potentially change a local state because it can lead our UI to react in many different ways, depending on how the developers decided to manage that state update.