Migrate Invoice Routes to Next.js App Router

Instructor: [0:00] Now that we've refactored our customers route, my recommendation would be to pause the video and work on refactoring the invoices route and migrating it into the app router.

[0:13] For those of you who decided not to do that, I'll give one more recommendation to pause the video and try to refactor on your own, just to get used to the pattern of moving a route from the pages router to the app router and using server components and client components.

[0:31] We're just going to go ahead and move our invoices route over. We can come here, let's get the index, so we can copy this and let's create our invoices route. We know we need our layout.tsx file. We can paste this in and we don't need any of this GET layout function. We can remove that and save that.

[0:58] Now we want to give this a page because we know that every route needs a page. We can just give it a page.tsx, export default function invoices page. It needs children, children ReactNode. Let's get rid of this so we can see, and then we just want to return the children. We'll save that.

[1:34] Now, if we come to our app, I've already added some data for invoices. If we come to invoices, see that it loads, and we have one of our invoices. Now, when we click this, we want to go to the invoices ID page. Let's come here and let's create our invoices ID page. Then we can grab our invoices ID page in the Pages router. Let's paste this here.

[2:07] Let's go ahead and remove the getLayout function and remove those imports. Let's save this and let's come back to our app. Now the goal is, let's go to Sales v2 because that's our route, v2. We're making use of next/router, so again, we just need to change that.

[2:33] We can come into components, our invoice page, and we see we're using the router.pathname again. We can change this to be the usePathname from next/navigation. Then for all instances of the router, we can change this to use pathname and pathname, and then we just want to remove the router here, save that.

[3:08] Let's see, so we have a form on this page and we are using useState. If we scroll down, it is this form right here, for creating a new invoice. If we come into our forms, Create Invoice, and we look at what we're doing here, we have the router here as well.

[3:31] Here, we're actually using the router to navigate, so we also get a router from next/navigation. If we just change this to navigation, we can save that. This is being used as a server component. We can come into our invoices page, and let's make this a client component, save that. Now it works.

[3:58] Just as a quick aside, you'll notice that we made the invoices page the client component.

[4:06] Any component underneath that is a client component. You don't have to declare that it's a client component by adding this 'use client' directive at the top of it.

[4:15] In our form here, this is a client component, but because it's within this invoices page, which is a client component, we don't have to add that directive. The other option would have been in our App router in the invoices layout, where we have this page, we could have just made this a client component. That would have worked as well.

[4:39] Before we save that, if we remove this directive from the invoices page and save that, but then we save this here, we'll see that it's still working, because everything is a client component. We're not trying to have a server component in a client component or a client component in a server component. That works.

[4:57] Now we want to navigate to this invoice ID. If we click this, it's going to try to take us to the Sales route again. Remember, we haven't moved that over because we're still migrating our routes. We can just say, Sales v2, enter.

[5:10] We're going to see that we have a server component that imports next/router, so we need to add the router. In this page, we need to import the router from next/navigation and save that.

[5:26] Then, in our Create Deposit form, we're using the router here as well. Navigation and save that. OK, so now we need to change this to a client component. We can come into, as we just did, let's just make this page a client component.

[5:43] If we come back. Now it's not rendering. If you remember, we need to pass children to the layout so that it knows to apply the layout to the page as well.

[5:56] Here we can just add the children again. Then here, let's just wrap the children in the invoices page.

[6:04] If we save that on our invoice ID page, we just changed it to be the next navigation routerbut we can get rid of the router completely because remember that our pages in the app router have access to the page params.

[6:18] We can get rid of the router. Let's get the params. Then we can save that. Come back to our app. Now, everything is working as expected with our invoices route.