illustration for Migrate Next.js Application to App Router

Migrate Next.js Application to App Router


Ben Patton
1h 15m closed-captioning
26 lessons
people completed
Published 2 months ago
Updated a month ago

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. 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

Free Community Resource

A Community Resource means that it’s free to access for all. The instructor of this lesson requested it to be open to the public.

Course Content

1h 15m • 26 lessons

    You might also like these resources:

    illustration for Introduction to Cloudflare Workers
    Kristian Freeman・36m・Course

    Become familiar with the Workers CLI wrangler that we will use to bootstrap our Worker project. From there you'll understand how a Worker receives and returns requests/Responses. We will also build this serverless function locally for development and deploy it to a custom domain.

    illustration for Create an eCommerce Store with Next.js and Stripe Checkout
    Colby Fayock・1h 4m・Course

    This is a practical project based look at building a working e-commerce store using modern tools and APIs. Excellent for a weekend side-project for your developer project portfolio

    illustration for Practical Git for Everyday Professional Use
    Trevor Miller・1h・Course

    git is a critical component in the modern web developers tool box. This course is a solid introduction and goes beyond the basics with some more advanced git commands you are sure to find useful.