UI Interaction

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

When to Add "use client"

Add the "use client" directive only when the component uses:

1. Event handlers - onClick, onChange, onSubmit, etc.
2. React hooks - useState, useEffect, useRef, useCallback, useMemo
3. Browser APIs - window, document, localStorage, navigator
4. Third-party client libraries - libraries that require browser context

Pattern: Minimal Client Boundary

Keep "use client" components as small as possible:

// components/counter-button.tsx
"use client";

import { useState } from "react";

export function CounterButton() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count}
    </button>
  );
}

// app/page.tsx (Server Component - no "use client")
import { CounterButton } from "@/components/counter-button";

export default function Page() {
  // Server-side data fetching, no client JS here
  return (
    <main>
      <h1>Welcome</h1>
      <CounterButton /> {/* Client boundary starts here */}
    </main>
  );
}

Workflow

Step 1: Identify Interactive Elements