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

Set up GitHub OAuth for a Next.js 13 Application

Set up Planetscale Main and Dev Branches and Create Tables through Prisma

Setup Uploadthing for Image Uploads

Deploy the Initial Next.js App with Vercel & Planetscale

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

Initialize the App Router in a Next.js Project

Setup the Root Layout in a Next.js App Router Project

Migrate a Next.js Pages Route to App Router

Specify Client Components with Client-side Routing to "use client" in Next.js App Dir

Access Route Params from Props inside a Next.js Dynamic App Router Route

Migrate a Next.js Pages Router Component utilizing getServerSideProps to the App Router

Migrate Next.js Pages Auth API Handler to App Router

Migrate a Next API Route to App Router GET Route Returning a NextResponse

Migrate Add Customer Api Route By Creating POST Method in Customer Route Handler

Create a Dynamic API Route in Next.js App Router with the context Param

Refactor Customer GET Route Handler to Server Component in Next.js 13 App Router

Isolate Data Fetching and Add Suspense to a React Server Component in Next.js App Router

Refactor Dynamic CustomerId API Route Handler to a React Server Component

Refactor POST Handler for Creating a Customer into a Next.js Server Action

Refresh Data with Next.js revalidatePath when submitting a Server Action

Display Pending UI with React useFormStatus Hook (experimental)

Update Server Action and Form Action To Provide Better UX for Submitting a Form in Next.js

Add Validation With Zod and Error Handling for Next.js Server Actions

Optimistically Create Deposits with useOptimistic (experimental)

Clean Up and Deploy a Next.js 13 Application Powered by the App Router

Migrate Next.js Application to App Router

Dynamic API routes are similar to a dynamic page route. We can create a folder with the dynamic bracket syntax `[customerId]` that will map to the customer id found in the url.

The remaining syntax changes are utilizing `NextResponse` and exporting a `GET` function from the `route.ts` file.

Migrate Next.js Application to App Router

Create a Dynamic API Route in Next.js App Router with the context Param

Social Share Links