Name: Refactor Invoice POST Handler to Next.js Server Action
Uploaded: 2023-08-15T21:53:50-05:00
Description: With our customer POST handler now moved to a server action your goal is to do the same thing with the invoice POST handler

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

With our customer POST handler now moved to a server action your goal is to do the same thing with the invoice POST handler

https://app.egghead.io/api/v1/lessons/next-js-refactor-invoice-post-handler-to-next-js-server-action/subtitles

Instructor: [0:00] Now that we've created our server action for creating a customer, your challenge in this video is to do the same thing with our invoices.

[0:12] Remove the invoices route and create an invoices action, and then in the form to create an invoice, replace the React Hook Form and use Query code with the server action.

[0:23] I'll just show my solution. One thing you'll need to do is make sure you pass the customers down to the dialog component, where we have the form for creating an invoice.

[0:34] The reason being is that before we had been using React Query to call our GET customers API route, but that route no longer exists, so we need to pass those customers down from a server component to the dialog component.

[0:47] The first thing to note that I did was I added this create invoice form. This is a new form that's under the full stack forms here. In this server component, we get our customers and we pass it to this Create Invoice form, so we can look at this Create Invoice form.

[1:02] Here, I refactored it. It was using React Hook Form and React Query, and so I refactored it to use a server action. Like our customer action, we have our invoice form ref for our form to clear it once we submit it.

[1:15] Here we have our action with the form data, and then we pass that form data to our add invoice action. Then once that action completes, we set open to  so the dialog closes.

[1:26] Now, if we go look in our action here, most of this was originally copied from the invoice API route, which we deleted. The main difference here is that instead of destructuring from the request, we are just getting them straight from the form data. Then we do our normal checks, and then we add it assuming there is no errors.

[1:45] Then, at the end, we redirect to that invoice ID.

Refactor Invoice POST Handler to Next.js Server Action

Share this video with your friends

Course

Next Migration Course Extras