nextjs-patterns

# Next.js Frontend Development Patterns

This skill provides comprehensive guidance for building modern Next.js applications following production-ready patterns and best practices.

## Technology Stack

- **Next.js**: 14/15/16+ with App Router (NOT Pages Router)
- **React**: 18/19+ with Server and Client Components
- **TypeScript**: Strict mode with comprehensive typing
- **Styling**: Tailwind CSS v4 with utility-first approach
- **Components**: shadcn/ui (Radix UI primitives)
- **State Management**: Zustand with persist middleware
- **Data Fetching**: TanStack Query (React Query)
- **Validation**: Zod schemas
- **Package Manager**: pnpm preferred

## Core Principles

### 1. Server Components First

**By default, all components are Server Components**. Only add 'use client' when necessary:

✅ **Use Server Components for:**
- Pages that fetch data
- Static content
- Layouts
- Components that don't need interactivity

✅ **Use Client Components for:**
- Interactive elements (onClick, onChange, etc.)
- React hooks (useState, useEffect, etc.)
- Browser APIs (localStorage, window, etc.)
- Event listeners
- Third-party libraries that require client-side

**Example Server Component:**
```typescript
// app/(main)/page.tsx
import { HeroSection } from "@/components/hero-section";
import { FavoritesSection } from "@/components/main/favorites-section";

export default function Home() {
  return (
    <div className="min-h-screen bg-gradient-to-b from-orange-50/30 via-white to-red-50/20">
      <HeroSection />
      <FavoritesSection />
    </div>
  );
}
```

**Example Client Component:**
```typescript
// components/ui/button-with-state.tsx
'use client'

import { useState } from 'react'
import { Button } from '@/components/ui/button'

export function Counter() {
  const [count, setCount] = useState(0)

  return (
    <Button onClick={() => setCount(c => c + 1)}>
      Count: {count}
    </Button>
  )
}
```

### 2. The cn() Utility Pattern

**ALWAYS use the `cn()` utility for clas