The introduction of the App Router marks an evolution in how Next.js apps are built.
With a focus on concurrent React features, there are considerations to make when it comes to data fetching, rendering, and especially state management.
For years, Redux has been synonymous with "state management" for React apps. You just put your data in the Redux store, and it can be used in any component regardless of whether it was on the server or the client.
But with Next.js 13's App Router, a clear distinction has been drawn between React Server Components (RSCs) and Client Components. This distinction introduces three new rules for state management.
Three Rules for State Management in Next.js 13
Rule #1: No Global Stores
Gone are the days of defining a store as a global variable. You need to plan accordingly.
Rule #2: RSCs Should Not Show the Store's Data
Data from the store should not be displayed by React Server Components. If you follow the first rule about not having a global store, this becomes easy to enforce.
Rule #3: Server Components for Immutable Data, Client Components for Mutable Data
The type of data you provide for the user dictates the type of client you should choose.
No matter which state management approach or library you use, as long as you learn to follow these three rules, you'll be successful.
Rock Solid State Management Patterns
In the State Management with Next.js App Router tutorial, you'll get hands-on practice with several state management systems as you work with mutable and immutable data in a real-world ecommerce app that features Product, Cart, and Review data.
React Context
Learn how using React Context has changed with the introduction of React Server Components.
Redux with Redux Toolkit
Work around having a global Redux store as you combine data from the server with client-generated reviews and ratings.
Zustand
Adopt a multi-store, hooks-centric approach to state management with the Zustand library.
Jotai
Apply Jotai's atomic model of state management to Cart and Review data.
By the end of this tutorial, you'll have hands-on practice implementing several rock-solid patterns for managing mutable state on a client.
Getting Started
This tutorial is split into several exercises, each building upon the next. Watch the exercise introduction, read the accompanying explanation, then try your hand at implementing the solution.
You can either work locally by cloning the tutorial repository, or use the online Gitpod editor linked for each exercise.
When you're ready, follow along with the exercise solution and compare your approach!