When will you use this?

You use layouts and styling in every page you build from your first screen to production.

• Course catalogs, lesson sidebars, and instructor dashboards all use layouts and shared navigation.
• When a student opens a lesson page, nested layouts keep the header and progress bar consistent.

Real-world: Freshdesk-style support portal

The Customer support team building Freshdesk-style support portal uses Form Validation to reject empty emails and weak passwords before saving to the database. support agents never see the TypeScript files — they just get a fast, reliable ticket queue and reply interface.

Production-style code

'use server';

import { z } from 'zod';

const enrollSchema = z.object({
  courseId: z.string().min(1),
  email: z.string().email()
});

export async function enrollWithEmail(formData: FormData) {
  const parsed = enrollSchema.safeParse({
    courseId: formData.get('courseId'),
    email: formData.get('email')
  });

  if (!parsed.success) {
    return { errors: parsed.error.flatten().fieldErrors };
  }

  // save enrollment...
  return { success: true };
}

What happens in production: In Freshdesk-style support portal, getting Form Validation right means support agents trust the ticket queue and reply interface every day.

Lesson example (start here)

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

'use server';

import { z } from 'zod';

const enrollSchema = z.object({
  courseId: z.string().min(1),
  email: z.string().email()
});

export async function enrollWithEmail(formData: FormData) {
  const parsed = enrollSchema.safeParse({
    courseId: formData.get('courseId'),
    email: formData.get('email')
  });

  if (!parsed.success) {
    return { errors: parsed.error.flatten().fieldErrors };
  }

  // save enrollment...
  return { success: true };
}

Line-by-line walkthrough

How it works (big picture)

• Zod schema defines rules.
• safeParse returns errors without throwing.
• Return field errors to the form for display.

Do this on your computer

1. npm install zod
2. Add schema to a Server Action
3. Submit empty form — see errors returned
4. Show errors in UI with useFormState
5. Read the real-world section and name which part of LearnHub uses this topic.
6. Run the example locally with npm run dev and confirm the same behavior.
7. Change one value in the example (route, text, or course id) and predict what will happen before you save.

Experiments — try changing this

• Change a string or route in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error overlay, then fix it.
• Change the API URL or course id and see how the page data changes.

Remember

Validate on the server always. Zod is a popular TypeScript choice. Return errors to the form for UX.

Common questions