Name: Migrate Remaining Next.js Pages to App Router
Uploaded: 2023-08-15T18:47:48-05:00
Description: Now that we have moved over the bulk of our routes to the app router we can move the remaining routes to the pages routes app router.

Primer on Next.js App Router Nested Layouts

Primer on Dynamic Routing in the Next.js App Router

Migrate Invoice Routes to Next.js App Router

Migrate Remaining Next.js Pages to App Router

Migrate UploadThing Route Handler to Next.js App Router 

CHALLENGE: Migrate Remaining Pages Api Routes

Refactor React Invoice Client Components in Next.js

Refactor Next.js User Info Api Route into React Server Components

Refactor Invoice POST Handler to Next.js Server Action

Refactor Next.js API Route for Deleting a Deposit Into a Server Action

Refactor Create Deposit Api Route into a Next.js Server Action

Next Migration Course Extras

Now that we have moved over the bulk of our routes to the app router we can move the remaining routes to the pages routes app router. 

https://app.egghead.io/api/v1/lessons/next-js-migrate-remaining-next-js-pages-to-app-router/subtitles

Instructor: [0:00] Now we can come into our Sales route in our Pages router, and we can actually remove this route. Let's delete it and then we can come to our Sales v2 route. Let's just rename this Sales. Now we can come back to our app, and let's test out our routes

[0:19] Let's go to Sales and then we can go to Customers. You can click on the customer, we get the customer details. We can go to invoices click on our Invoice and we can go to a Deposit as well. Our Sales route is working as we expect.

[0:35] Now we can get rid of our index route. If you remember in our App router, we created our root layout which has the same functionality as our Underscore app, our document in our index. We can get rid of our index route. Let's delete it, and then come back to our app.

[0:55] Let's come back to our root route, and we get a 404. That's because, as we said before, we need a page for every layout. We can add our page.tsx. If we save this and come back to our app, now we're getting our root layout. Then we can navigate to our pages as we have before.

[1:18] The last thing we need to move over is our login route. Let's copy our page, come to our app and create our login. We can paste this here. We can remove our layout, and then here, we're actually going to convert this to a server component. We can use getServerSession and we can import that from next-auth.

[1:44] We need our authOptions from our API handler. We can remove this, then remove the session and remove our layout. We can just say if session, we want to redirect. Now we can import that from next/navigation.

[2:04] Now we need to await this, so we can just say await. This is an async function. Our sign-in function is a client component, so we need to come into our sign-in function here, and we just need to add our 'use client' directive here.

[2:22] If we save and we come back, and let's sign out, so we have conflicting routes. Let's go ahead and let's remove our login route here. We need to restart our server, come back to our app, and now we have our sign-in page and we can sign in again. Now we're on our home page and our routes all work as expected.

[2:47] The last thing that we needed to do is just remove our _app and document.tsx. We can highlight both of those and delete them. Let's go ahead and restart the server and come back to our app.

[3:00] Something you may run into is that it is looking for files that no longer exist. You can come into your explorer here and delete the next folder. Let's stop the server and start it again. Now we want to refresh. Now everything works as we expected.

[3:17] To test, we can just click through our routes. We can go to invoices as we did before, it's here. An individual invoice will load. We can go to our customer and back to our dashboard.

[3:28] In review, we moved the rest of our routes over to the App router. We did a little bit of refactoring for our login page, and then we removed all of the routes from our Pages router. All we have left in our Pages router are our API routes.

Migrate Remaining Next.js Pages to App Router

Share this video with your friends

Course

Next Migration Course Extras