Name: Refactor React Invoice Client Components in Next.js
Uploaded: 2023-08-15T21:16:37-05:00
Description: Now that we have built an intuition for refactoring our api routes and components to server components by refactoring the customer api handlers we can do the same thing for the invoices handlers that fetch data

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 built an intuition for refactoring our api routes and components to server components by refactoring the customer api handlers we can do the same thing for the invoices handlers that fetch data

https://app.egghead.io/api/v1/lessons/next-js-refactor-react-invoice-client-components-in-next-js/subtitles

Instructor: [0:00] Now that we've seen how to move over our customers get API route handlers to a React server component, we can do that with our invoices as well. I would encourage you to stop the video and migrate the invoices API routes to React server components and add suspense as well.

[0:16] If we come down and look at our invoices page, so we can go ahead and remove our React query code. Then right off, we see at least one place that we can refactor to be a server component. Let's go ahead and remove this data. Let's copy this dev and we can create another component.

[0:34] We can just call it our invoices. Then now we can come up into our API route and we can just copy all of our logic for our GET requests here. Copy down. Then we can delete that GET request, and now in our invoices, we can just paste that logic.

[0:53] For our invoices, we don't actually want to return the invoice list items for it, so we can just remove it from all invoices data. Let's make sure we import our function. We see we also need to create one for our invoice list. We can just do this within our invoice list component.

[1:11] Instead of passing these as props, let's just remove this prop. Let's go ahead and remove our use of pathname as well for now. Instead, we can come back up and we can copy our logic again. All that we need to do with this is just return our invoice list items. We can make this async, and then we can delete all of the computation. We just want to return our invoice list items.

[1:35] Now, let's clean up our passing of props, and then we can put our invoices here. We can wrap both of these in suspense. Now, if we look, nothing in our file needs to be marked as 'use client'. We can come back to our invoices layout and we can take off this 'use client' directive.

[1:56] We can come back to our app and we can come to invoices. We need to mark our form now with our 'use client' directive, we need to mark our modal with the 'use client' directive, we need to change our invoice ID route.

[2:14] We can come to our invoice ID and get rid of useQuery call. Here, we can just come to our API route, invoice ID, our GET request, and let's get the invoice details. We can remove this route handler and we can paste it here. We can just make this a redirect.

[3:05] Here, we are getting this error and we can just remove the type and it will fix itself. We can come back to our application. Now, let's go to invoices/Phyllis. We are getting our invoice IDs as well.

Refactor React Invoice Client Components in Next.js

Share this video with your friends

Course

Next Migration Course Extras