Learn how to manage forms on Next.js App Router, including client & server-side field validations, and four ways of sending form data to the server.

Intro to Forms with Next.js App Router

Initialize a new Next.js application with App Router, Tailwind CSS, and the shadcn UI library.

Next.js App Setup

A quick walkthrough on adding additional fields to the form before connecting the `onSubmit` functionality for client-side validation.

Client-Side Form Validation

Set up server-side validation by creating an API route and defining a route handler for POST requests.

Implement a Route Handler for JSON POST Requests

Learn how to create a new API route for handling form data.

Creating an API Route for Form Data

Learn how to create a server action and use it to submit form data.

Creating a Server Action for Form Data

Implement a Server Action for Handling Form Data

Implement server-side validation that supports async calls of any kind.

Implement Async Server-Side Validation

You're ready to use React Hook Form and Zod to build forms in a Next.js application with TypeScript.

Wrapping Up the Forms Tutorial

Building forms with React Hook Form and Zod.


React Hook Form

Next.js

Forms

Forms Management with Next.js App Router

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

An introduction to the three rules of state management in apps that use the Next.JS App Router.

Intro to State Management with Next.JS App Router

Take a tour of the Donuts an Dragoons app, and implement cart functionality using React Context for state management.

With a Cart Context and Provider, we can manage and share cart state without passing props between multiple components.

Creating a Cart Context and Provider

Add Cart Support with React Context

In order to initialize our cart's data, we need to get data from React Server Components into our Client Components.

In order to initialize the cart, we need to make updates to the CartProvider.

Pass Data from the Server to the Client Context

Initialize the Cart with Server Data

Learn how to manage customer reviews in a React application, focusing on mutable and immutable data, and dynamically updating average ratings.

Implement a React Context to manage dynamically updating reviews.

Handling Reviews with React Context

Integrating User Reviews and Ratings into a Product Detail Page

State Management with React Context

With the the React version of the application ready to go, let's take a look at how to use a state manager with the App Router.

Walk through the process of replacing an existing cart context with a Redux store in an App Router application.

Replacing Cart Context with Redux

Using Redux in an App Router Application

In this challenge, a reviews slice will be initialized and added to the Redux store.

Adding reviews to the Redux store follows a similar process to the cart, but with a little bit of a twist.

Implementing Reviews in the Redux Store

Add a Review Slice to the Redux Store

Redux for State Management

The Zustand state management library offers a more streamlined approach compared to Redux, while following the same unidirectional model for managing state.

Learn how Zustand is used to manage cart and review state in our App Router app.

Implement Zustand for State Management

State Management with Zustand

Zustand  for State Management

The Atomic model of state management and see how Jotai allows you to define atoms and calculate dependencies effortlessly.

Dive into the world of server-side rendering with Jotai as you explore a complete example project.

Implementing Jotai for State Management

The Atomic Model of State Management with Jotai

Jotai for State Management

The App Router has changed the way we think about state management in Next.JS apps. How should you decide which solution is right for you?

Free Next.js Tutorials

A collection of exercise-driven, in-depth Next.js tutorials.

Forms Management with Next.js App Router

State Management with Next.js App Router