nextjs-server-components

# Next.js Server Components Skill

Patterns for using React Server Components effectively.

## Server Components (Default)

### Basic Server Component

```tsx
// This is a Server Component by default
async function UserProfile({ userId }: { userId: string }) {
  // Direct database access
  const user = await db.user.findUnique({ where: { id: userId } })

  // No client JavaScript shipped
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  )
}
```

### Data Fetching

```tsx
// Fetch data directly in component
async function ProductList() {
  const products = await fetch('https://api.example.com/products', {
    next: { revalidate: 3600 },  // Cache for 1 hour
  }).then((res) => res.json())

  return (
    <div>
      {products.map((product) => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  )
}
```

### Database Access

```tsx
import { prisma } from '@/lib/prisma'

async function RecentOrders() {
  // Direct Prisma queries
  const orders = await prisma.order.findMany({
    where: { status: 'completed' },
    orderBy: { createdAt: 'desc' },
    take: 10,
    include: { user: true, items: true },
  })

  return (
    <table>
      <tbody>
        {orders.map((order) => (
          <OrderRow key={order.id} order={order} />
        ))}
      </tbody>
    </table>
  )
}
```

## What Can Server Components Do

### Access Backend Resources

```tsx
// File system
import { readFile } from 'fs/promises'

async function MarkdownPage({ slug }: { slug: string }) {
  const content = await readFile(`./content/${slug}.md`, 'utf-8')
  return <Markdown content={content} />
}

// Environment variables (including server-only)
async function Config() {
  const apiKey = process.env.SECRET_API_KEY  // Not exposed to client
  const data = await fetchWithKey(apiKey)
  return <div>{data}</div>
}
```

### Heavy Dependencies

```tsx
// Large libraries only run on server
import { highlight } from 'shiki'

async function CodeBl