illustration for Migrate Next.js Application to App Router

Migrate Next.js Application to App Router

Instructor

Ben Patton
1h 15m
6
people completed
Bookmark
Download
RSS

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

Course Content

1h 15m • 26 lessons