UI Interaction for Next.js Applications

Overview

UI Interaction handles the client-side interactivity layer of Next.js applications. This skill covers adding client-side events, managing local state, implementing form validation with Zod, and using React Hook Form for complex forms.

Key principles:

• Only add "use client" when client-side APIs are actually needed
• Use Zod schemas for both client and server validation (single source of truth)
• Prefer Server Components by default; convert to Client Components only for interactivity
• Implement optimistic updates for responsive user experience

Skill-scoped Context

Official Documentation:

• React Hooks: https://react.dev/reference/react/hooks
• Zod Validation: https://zod.dev/
• React Hook Form: https://react-hook-form.com/
• Next.js Client Components: https://nextjs.org/docs/app/building-your-application/rendering/client-components