Post #1
Post #1
Conversation
post.md
Outdated
| @@ -2,6 +2,14 @@ | |||
|
|
|||
| In this blog post, we will explore how to use [Zod](https://zod.dev/), a declarative JavaScript validation library, for form validation in a [Next.js](https://nextjs.org/) application. We will also discuss the importance of server-side validation and how to handle validation errors returned from the server. | |||
There was a problem hiding this comment.
This is a strong transition statement, but we may want to add more about why this post is important. I suggest merging the paragraph from "The Importance of Server-Side Validation" into this intro paragraph. Something like, "Server-side validation is a critical line of defense against invalid and malicious data, and ensures data integrity and security. In this post, we will explore how to use Zod, a declarative JavaScript validation library, for server-side form validation in a Next.js application. We will also look into to handling validation errors returned from the server."
post.md
Outdated
| ## The Importance of Server-Side Validation | ||
|
|
||
| While client-side validation provides immediate feedback and improves user experience, server-side validation is a must for any application. It acts as a second line of defense against invalid or malicious data. Even if you augment your application with client-side validation, server-side validation is necessary to ensure data integrity and security. |
There was a problem hiding this comment.
We can remove this paragraph if merged into the introduction.
|
|
||
| ## Handling Server-Side Validation Errors | ||
|
|
||
| When we submit our form, the server-side action validates the form data against the Zod schema. If the validation fails, the server returns an array of errors (`ZodIssue[]`). Each error object has the following structure: |
There was a problem hiding this comment.
I'd suggest a transition sentence here. Something like, "Using Zod, let's tease out a validation flow that integrates with Next.js. When we submit our form, a Next.js server-side action validates ...."
There was a problem hiding this comment.
Going to stick with my bland copy for this paragraph
post.md
Outdated
|
|
||
| ## Contact Page | ||
|
|
||
| In our contact page, we import the server action and pass it to the `Form` component. The `ContactPage` is a server component while the `Form` component is a client component. We need to use the `useFormState` hook to handle validation errors coming from the server. The `useFormState` hook can only be used in client components. |
There was a problem hiding this comment.
I suggest adding doc links to the phrases server component and client component.
| type Props = { | ||
| action: ( | ||
| _prevState: any, | ||
| params: FormData | ||
| ) => Promise<{ errors: ZodIssue[] }>; | ||
| }; |
There was a problem hiding this comment.
As a reader, I'd like to know what this type definition is doing. Can you explain?
There was a problem hiding this comment.
Going to assume the reader is familiar with typescript already and do not want to tangent from the main concepts too much.
post.md
Outdated
| }; | ||
| ``` | ||
|
|
||
| In conclusion, Zod provides a powerful and flexible way to handle form validation in a Next.js application. By combining it with server-side actions and the `useFormState` hook, we can create robust forms with clear and specific error messages. |
There was a problem hiding this comment.
A few things here:
- I suggest adding a section title. Something like, "Wrapping it Up"
- Let's flesh out more how the "why" is accomplished at this point
| @@ -1,6 +1,6 @@ | |||
| # Using Zod for Form Validation with React Server Actions in Next.js | |||
|
|
|||
| In this blog post, we will explore how to use [Zod](https://zod.dev/), a declarative JavaScript validation library, for form validation in a [Next.js](https://nextjs.org/) application. We will also discuss the importance of server-side validation and how to handle validation errors returned from the server. | |||
| Server-side validation is a critical line of defense against invalid and malicious data, and ensures data integrity and security. In this post, we will explore how to use [Zod](https://zod.dev/), a declarative JavaScript validation library, for server-side form validation in a [Next.js](https://nextjs.org/) application. We will also look into to handling validation errors returned from the server. | |||
There was a problem hiding this comment.
This is a fabulous introduction 👏🏽
post.md
Outdated
| Zod allows us to define a validation schema for our form data. This schema is a declarative way of specifying the validation rules for each field. For example, to mark a field as required, we can use the `min(1)` method, which specifies that the field must have a minimum length of 1. | ||
| Zod allows us to define a validation schema for our form data. This schema is a declarative way of specifying the validation rules for each field. For example, to mark a field as required, we can use the `min(1)` method, which specifies that the field must have a minimum length of 1. The 2nd argument is optional and can be used to override the default error message. | ||
|
|
||
| Zod has many validation methods for different data types and scenarios, for strings you can use the `email()` method to validate an email address or `url()` to validate a URL, if you have custom needs you can always use `regex()` to validate against a regular expression. |
There was a problem hiding this comment.
Definitely a well-needed sentence, but it feels a little long. Maybe try breaking it up? Something like:
Zod has many validation methods for different data types and scenarios. You can use the
email()method to validate an email address, orurl()to validate a URL. Also, if you have custom needs, you can always useregex()to validate against a regular expression.
| @@ -82,10 +81,11 @@ export default async function contactAction(_prevState: any, params: FormData) { | |||
|
|
|||
| ## Contact Page | |||
|
|
|||
| In our contact page, we import the server action and pass it to the `Form` component. The `ContactPage` is a server component while the `Form` component is a client component. We need to use the `useFormState` hook to handle validation errors coming from the server. The `useFormState` hook can only be used in client components. | |||
| In our contact page, we import the server action and pass it to the `Form` component. The `ContactPage` is a [server component](https://nextjs.org/docs/app/building-your-application/rendering/server-components) while the `Form` component is a [client component](https://nextjs.org/docs/app/building-your-application/rendering/client-components). We need to use the `useFormState` hook to handle validation errors coming from the server. The `useFormState` hook can only be used in client components. | |||
There was a problem hiding this comment.
Love the links here. Very handy.
post.md
Outdated
| Zod provides a powerful and flexible way to handle form validation in a Next.js application. We can apply server-side validation to our forms and still present a great user experience by following a few simple steps: | ||
|
|
||
| - Define a Zod schema for each server action | ||
| - Validate user input in your server action using the Zod schema | ||
| - Return an array of errors if validation fails | ||
| - In your client component, use the `useFormState` hook to receive validation errors | ||
| - Display the validation errors to the user |
There was a problem hiding this comment.
Much better conclusion, but something still feels a bit off... Maybe try something like this?
Zod provides a powerful and flexible way to handle form validation in Next.js applications. Using Zod, we can implement server-side validation to our forms and still present a great user experience by following a few simple steps: [insert steps here]
post.md
Outdated
| } | ||
| ``` | ||
|
|
||
| Now, let's look at how we can implement this in our Next.js application. We'll start with the server action, then move on to the contact page, and finally the form component. |
There was a problem hiding this comment.
Remove comma after now. You can even change up the wording:
Let's look now at how ....
No description provided.