ProNextJS
    Loading
    lesson

    Intro to Forms with Next.js App Router

    Jack HerringtonJack Herrington

    In this tutorial you'll learn how to do forms the right way with the Next.js App Router.

    You'll learn a fast and easy way to do both client and server-side field validations, as well as four distinct methods of sending form data to the server.

    You will have access to all the code, allowing you to figure out which method suits your project the best.

    Tools and Libraries

    For the UI elements, this project will use shadcn layered on top of Tailwind. Feel free to use any UI libraries you prefer, but bear in mind that you'll need to modify the code accordingly.

    React Hook Form will be used to manage our form, data, and client-side validations.

    We'll also use Zod, a schema validation library, to verify data on both the client and server sides.

    The Importance of Validation

    It's not uncommon to come across projects where data is only validated on the client side. However, relying solely on client-side validation is a major flaw. You should never fully trust the client.

    The importance of data validation on both the client and server sides cannot be stressed enough. You'll learn how to validate data in both places using the same validation, making it super easy.

    Getting Started

    In this tutorial you'll be provided with commands and code to run, as well as opportunities to try things out for yourself.

    In the next video, we'll start by creating our Next.js application with App Router and Tailwind CSS as well as initializing the shadcn UI library.

    Transcript

    Let me show you how to do forms the right way on the Next.js App Writer. I'll show you a fast and easy way to validate fields on both the client and the server, and I'll walk you through not one, not two, but four different ways to send form data to the server for processing.

    And you'll have all the code to be able to decide for yourself which is the best method for your particular project. Oh, and you'll want to check out the section on field validations on the server. It's mind-blowing. So for this tutorial, we're going to use ShadCN on top of Tailwind to give us some really good looking UI elements.

    Now you can use whatever you like, but obviously you'll need to adjust the code for that. So my recommendation, first time through, is just to use ShadCN the way that I'm showing it to you. We'll use React Hook Form to manage the form, the data, and the client-side validation.

    Then we'll use a schema validation library called Zod, yeah, like the character from Superman, to validate data on both the client and on the server. And I can't stress enough how important it is to validate data from the form on both the client and the server.

    I've seen countless projects where folks validate only on the client. The client can't be trusted. You have to validate on both the client and the server, and I'll show you how to do that using exactly the same validation in both places so it's super easy. Alright, enough of my intro, let's get into setting up our application.

    First thing we're going to do is create our application and initialize the ShadCN UI library. The commands you need are in the instructions. Give it a go, and then I'll show you how I did it. Oh, and one more thing, and this is important, make sure that you select the app router as

    your router, as well as Tailwind and TypeScript as you're creating your Next.js application.