ProNextJS
    Forms Management with Next.js App RouterLevel up with Forms Management with Next.js App Router

    I respect your privacy. Unsubscribe at any time.

    This is a free tutorial

    In exchange for your email address, you'll get full access to this and other free ProNextJS tutorials.

    Why? First and foremost, your inbox allows us to directly communicate about the latest ProNextJS material. This includes free tutorials, NextJS Tips, and periodic update about trends, tools, and NextJS happenings that I'm excited about.

    In addition to the piles of free NextJS content, you'll get the earliest access and best discounts to the paid courses when they launch.

    There won't be any spam, and every email you get will have an unsubscribe link.

    If this sounds like a fair trade, let's go!

    lesson

    Wrapping Up the Forms Tutorial

    Jack HerringtonJack Herrington

    By now, you should be comfortable with not only rendering forms in React but also utilizing React Hook Form for data management.

    You've also learnt how to use Zod for data validation and four distinct ways to send data to the server:

    • Sending a JSON payload to an API endpoint
    • Sending a form data payload to an API endpoint
    • Sending a data object to a server action
    • Sending a form data object to another server action.

    The choice of which method to use ultimately depends on the needs of your application.

    What's even more impressive is the minimal use of TypeScript in our implementation!

    While we did employ a bit of typing on the properties of the components, the core functionality of TypeScript was primarily handled by z.infer. This handy function generated the TypeScript type from the Zod schema. Remarkably, the Zod schema itself did not contain any TypeScript types.

    Armed with this knowledge, you should be ready to start building your next forms in a JS environment.

    Enjoy the process, and don't be afraid to explore and experiment!

    Transcript

    So now you know not just how to render forms, but also how to use React Hook Form to manage data, Zod to validate data, and four, yes, four different ways of sending data to the server. A JSON payload to an API endpoint, a form data payload also to an API endpoint, a data

    object to a server action, and finally a form data object to another server action. Of course, you get to pick which is the right methodology for your application. What I find even more impressive is how little TypeScript we used. There's a little typing on the properties of the components, but the heavy lifting of

    TypeScript was done primarily by that z.infer that generated the TypeScript type from the Zod schema. In fact, the Zod schema has no TypeScript types in it at all. So cool. Enjoy, and start building out your next JS forms today.