React Server Components patterns in Next.js
View on GitHubplugins/aai-stack-nextjs/skills/nextjs-server-components/SKILL.md
February 1, 2026
Select agents to install to:
npx add-skill https://github.com/the-answerai/alphaagent-team/blob/main/plugins/aai-stack-nextjs/skills/nextjs-server-components/SKILL.md -a claude-code --skill nextjs-server-componentsInstallation paths:
.claude/skills/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