ProNextJS/state-management-tutorial

Code for the App Router state management tutorial

Quickstart

Take the State Management with Next.js tutorial at pronextjs.dev. There you'll find:

• Video explanations for each challenge and solution.
• Transcripts
• Text explanations
• Pre-configured Gitpod editor links for online coding

The tutorial discusses the following state management options:

• React Context
• Redux with Redux Toolkit
• Zustand
• Jotai

How to Use This Repo

Clone this repo to work locally, or follow exercise links from the tutorial exercise pages to GitPod editors.

Each subdirectory corresponds to a section of the tutorial. Inside of each subdirectory, you'll find an OBJECTIVE.md file to refresh your memory for the challenge goals.

In most cases, the starting point for each section is the solution from the previous section:

• 01-starting-point contains the starting point for the tutorial.
• 02-cart-context contains the application with basic React Context implementation.
• 03-cart-context-with-initial-state contains the application with initial state from the server.
• 04-complete-react-state contains the application with completed React state management.
• 05-cart-with-redux contains the application with a partial implementation of Redux for state management.
• 06-complete-redux contains the application with a complete Redux implementation.
• 07-complete-zustand contains the application with complete Zustand implementation for state management.
• 08-complete-jotai contains the application with complete Jotai implementation for state management.