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

Walkthrough the Next.js Pages Invoice Project That Will Be Migrated

InstructorBen Patton

Share this video with your friends

Send Tweet

Published a year ago

Updated a year ago

Now that both the developer and production environments are ready for use, we can walk through the project we are migrating from Nextjs Pages router to App router.

This project was originally created by Kent C Dodds for his Frontend Masters Remix Workshop.

In this course we are specifically focusing on migrating all pages, api routes, and components related to customers. There is an additional course, Next Migration Migration Extras that has additional resources/lessons.

Lastly, there is also a solution branch you can checkout to with git checkout solution that has a final folder in it with the completed code for you to reference at your convenience.

View code on GitHub

Migrate Next.js Application to App Router

Walkthrough the Next.js Pages Invoice Project That Will Be Migrated

Social Share Links