Learn Courses Lessons Articles

⌘K

Loading lesson

learn by doing,
two minutes at a time.

LearnCourses Lessons Articles

Watch & listenPodcasts Talks

StoriesCase studies Success stories Campaigns Browse everything →

© 2013–2026 egghead.iothe egg does not crack 🥚

all systems sunny-side up↑ Back to top

Learn Courses Lessons Articles

⌘K

Setup Uploadthing for Image Uploads | Migrate Next.js Application to App Router | egghead

Course

Migrate Next.js Application to App Router

26 lessons · 1h 15m

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

Course lesson

Setup Uploadthing for Image Uploads

Create an uploadthing account and application that we will use to store logo image for invoicing app

Duration: 1 min
Access: Free
Transcript: Needs source

Create an uploadthing account and application that we will use to store logo image for invoicing app

Course

Migrate Next.js Application to App Router

26 lessons · 1h 15m

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

Course lesson

Setup Uploadthing for Image Uploads

Create an uploadthing account and application that we will use to store logo image for invoicing app

How was this course?

Migrate Next.js Application to App Router · 26 lessons watched

Your rating

1234567

Not usefulExcellent

Anything else? Optional

Duration: 1 min
Access: Free
Transcript: Needs source