> This course will be updated as all the app router features and apis become stable
>_Credit for this application goes to Kent C. Dodds. The starter application was ported to Next.js from Kent's Remix workshops at Frontend Masters._
Why this course? Simply put, many are wondering how to migrate their application to Next.js new app router architecture and make use of server components, server actions, etc.
"Server components are the future." Twitter is saturated with comments like this. Many of us feel like it is tech version of Thanos, "Dread it. Run from it. Server Components arrive all the same."
Is this true? Emphatically no. So we can silence the infinity war now and say there is nothing wrong with using the pages router.
In fact, after the initial deployment lesson, you could stop this course and go make it something better or into something you want it to be using the pages router.
There are many incredible additions to Next.js new app router architecture. This is simply a course and resource for you should you choose/desire to migrate from pages router to app router.
You will learn how to:
- migrate api routes, pages, and nested layouts
- take advantage of routing in the app router for a better nested layout experience
- turn getServerSideProps into a React Server Component
- use server actions
And much more.
Due to the applications scale here are a few things to note:
- The course shows how to migrate a set of routes, api routes, etc with a few exceptions
- The remainder videos have been added to a supplemental course which you can find by searching for "Next Migration Course Extras" or clicking [here](https://egghead.io/courses/next-migration-course-extras-83bec19c). Consider them your bonus features and deleted scenes from the 'movie'.
- The extras course has been set up to align with the lessons here. For example:
- As you create the app router, there are 'primer' videos for how to create a page and dynamic routes in the app router
- As you go through migrating routes, you will find additional 'migrating routes' videos in the extras course
- As you migrate api routes, the remainder of the api route migration videos are in the extras course
And with that you are good to go!
Start your journey today and experience the possibilities of the Next.js app router
Overview
Syllabus
- 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
Taught by
Ben Patton
