When will you use this?

Learn this when you join a team on React 18/19 or Next.js — not required for your first todo app.

• New React apps may use Server Components and Suspense for faster first load.
• Next.js jobs expect you to know when code runs on server vs browser.

Real-world: shared Zod schema front + back

SaaS billing form shares zod schema between React and Node API — one source of truth for invoice line item rules.

Production-style code

// packages/shared/schemas/invoice.js
export const invoiceLineSchema = z.object({
  sku: z.string().min(1),
  qty: z.number().int().positive(),
  unitPrice: z.number().nonnegative()
});

// React
const form = useForm({ resolver: zodResolver(invoiceLineSchema) });

// Express API
app.post('/invoices', (req, res) => {
  const parsed = invoiceLineSchema.safeParse(req.body);
  if (!parsed.success) return res.status(400).json(parsed.error);
});

What happens in production: Validation drift between frontend and backend disappears — fewer "works in UI, fails in API" production bugs.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

// schemas/signupSchema.js
export const signupSchema = z.object({
  email: z.string().email(),
  password: z.string().min(8)
});

// SignupForm.jsx — UI only
// api/auth.js — signupUser(data)

Line-by-line walkthrough

How it works (big picture)

• Schema defines rules once.
• Form wires inputs.
• API function handles fetch and errors.
• Each file has one job.

Do this on your computer

1. Extract validation to a schema file.
2. Move fetch to api/ folder.
3. Keep form component under 150 lines.
4. Read the real-world section and name which part of the app uses this topic.
5. Run the example locally and confirm the same behavior in the browser.
6. Change one value in the example (text, initial state, or URL) and predict what will happen before you save.

Experiments — try changing this

• Change text or labels in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error message, then fix it.
• Open React DevTools (browser extension) while running Enterprise Form Architecture and inspect component props/state.

Remember

Split schema, UI, and API. Reuse schemas where possible. Same rules on client and server.

Common questions