ProNextJS

    Free Tutorial

    State Management with Next.js App Router

    Learn the new rules of state management with Next.js 14's App Router by implementing React Context, Redux, Zustand, and Jotai in this free tutorial.

    Jack HerringtonJack Herrington
    Start Learning

    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 14'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 14

    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!

    Start the first lesson now!

    Contents