docs: Update to Zod v4 syntax (#84807)

makandrr · Maxim Andriushin · icyJoseph · web-flow · commit 43eeb928e645 · 2025-10-20T21:26:52.000+02:00
### What?
Updated Zod syntax to v4 conventions in documentation examples.

### Why?
Zod 4 deprecates `message` parameter in favor of `error`, and string
format methods like `.email()` in favor of top-level functions like
`z.email()`.

### How?
- Replaced `{ message: '...' }` with `{ error: '...' }` 
- Changed `z.string().email()` to `z.email()`

---------

Co-authored-by: Maxim Andriushin &lt;maksim.andriushin@gmail.com&gt;
Co-authored-by: Joseph &lt;joseph.chamochumbi@vercel.com&gt;
diff --git a/docs/01-app/02-guides/authentication.mdx b/docs/01-app/02-guides/authentication.mdx
@@ -103,21 +103,21 @@ Use the Server Action to validate the form fields on the server. If your authent
 Using Zod as an example, you can define a form schema with appropriate error messages:
 
 ```ts filename="app/lib/definitions.ts" switcher
-import { z } from 'zod'
+import * as z from 'zod'
 
 export const SignupFormSchema = z.object({
   name: z
     .string()
-    .min(2, { message: 'Name must be at least 2 characters long.' })
+    .min(2, { error: 'Name must be at least 2 characters long.' })
     .trim(),
-  email: z.string().email({ message: 'Please enter a valid email.' }).trim(),
+  email: z.email({ error: 'Please enter a valid email.' }).trim(),
   password: z
     .string()
-    .min(8, { message: 'Be at least 8 characters long' })
-    .regex(/[a-zA-Z]/, { message: 'Contain at least one letter.' })
-    .regex(/[0-9]/, { message: 'Contain at least one number.' })
+    .min(8, { error: 'Be at least 8 characters long' })
+    .regex(/[a-zA-Z]/, { error: 'Contain at least one letter.' })
+    .regex(/[0-9]/, { error: 'Contain at least one number.' })
     .regex(/[^a-zA-Z0-9]/, {
-      message: 'Contain at least one special character.',
+      error: 'Contain at least one special character.',
     })
     .trim(),
 })
@@ -135,21 +135,21 @@ export type FormState =
 ```
 
 ```js filename="app/lib/definitions.js" switcher
-import { z } from 'zod'
+import * as z from 'zod'
 
 export const SignupFormSchema = z.object({
   name: z
     .string()
-    .min(2, { message: 'Name must be at least 2 characters long.' })
+    .min(2, { error: 'Name must be at least 2 characters long.' })
     .trim(),
-  email: z.string().email({ message: 'Please enter a valid email.' }).trim(),
+  email: z.email({ error: 'Please enter a valid email.' }).trim(),
   password: z
     .string()
-    .min(8, { message: 'Be at least 8 characters long' })
-    .regex(/[a-zA-Z]/, { message: 'Contain at least one letter.' })
-    .regex(/[0-9]/, { message: 'Contain at least one number.' })
+    .min(8, { error: 'Be at least 8 characters long' })
+    .regex(/[a-zA-Z]/, { error: 'Contain at least one letter.' })
+    .regex(/[0-9]/, { error: 'Contain at least one number.' })
     .regex(/[^a-zA-Z0-9]/, {
-      message: 'Contain at least one special character.',
+      error: 'Contain at least one special character.',
     })
     .trim(),
 })
