Next.js Web Client Development

Server vs Client Components

Default to Server Components unless you need:

• Event handlers (onClick, onChange)
• Browser APIs (window, localStorage)
• React hooks (useState, useEffect)

Component Split Pattern

For components needing server data + client interactivity:

components/
├── AccountForm.tsx              # Re-exports server component
├── AccountForm-server.tsx       # Fetches data, passes to client
└── AccountForm-client.tsx       # 'use client', handles interactions