Course

Migrate Next.js Application to App Router

1
Fork and Clone the Next.js 13 Project to Get Started
1m 15s
2
Set up GitHub OAuth for a Next.js 13 Application
3m 26s
3
Set up Planetscale Main and Dev Branches and Create Tables through Prisma
5m 15s
4
Setup Uploadthing for Image Uploads
1m 19s
5
Deploy the Initial Next.js App with Vercel & Planetscale
5m 29s
6
Walkthrough the Next.js Pages Invoice Project That Will Be Migrated
1m 48s
7
Initialize the App Router in a Next.js Project
1m 38s
8
Setup the Root Layout in a Next.js App Router Project
3m 16s
9
Migrate a Next.js Pages Route to App Router
4m 20s
10
Specify Client Components with Client-side Routing to "use client" in Next.js App Dir
3m 30s
11
Access Route Params from Props inside a Next.js Dynamic App Router Route
2m 29s
12
Migrate a Next.js Pages Router Component utilizing getServerSideProps to the App Router
2m 49s
13
Migrate Next.js Pages Auth API Handler to App Router
4m 13s
14
Migrate a Next API Route to App Router GET Route Returning a NextResponse
2m 38s
15
Migrate Add Customer Api Route By Creating POST Method in Customer Route Handler
3m 38s
16
Create a Dynamic API Route in Next.js App Router with the context Param
2m 32s
17
Refactor Customer GET Route Handler to Server Component in Next.js 13 App Router
1m 54s
18
Isolate Data Fetching and Add Suspense to a React Server Component in Next.js App Router
2m 45s
19
Refactor Dynamic CustomerId API Route Handler to a React Server Component
4m 23s
20
Refactor POST Handler for Creating a Customer into a Next.js Server Action
4m 13s
21
Refresh Data with Next.js revalidatePath when submitting a Server Action
1m 22s
22
Display Pending UI with React useFormStatus Hook (experimental)
1m 44s
23
Update Server Action and Form Action To Provide Better UX for Submitting a Form in Next.js
1m 42s
24
Add Validation With Zod and Error Handling for Next.js Server Actions
1m 17s
25
Optimistically Create Deposits with useOptimistic (experimental)
3m 22s
26
Clean Up and Deploy a Next.js 13 Application Powered by the App Router
2m 54s

Fork and Clone the Next.js 13 Project to Get Started

InstructorBen Patton

Share this video with your friends

Send Tweet

This project is a Next.js example of Kent C Dodd's Frontend Masters Advanced Remix Workshop project.

The aim of this project and course is to take a large project using the traditional Next.js pages architecture and migrate the full project to use the new app directory architecture.

We will fork project repo and clone it to get setup with the project locally.

View code on GitHub

Migrate Next.js Application to App Router

Fork and Clone the Next.js 13 Project to Get Started

Social Share Links