nextjs-15-patternslisted
Install: claude install-skill aiskillstore/marketplace
# Next.js 15 Patterns
## Server vs Client Components
### Default: Server Components
```typescript
// app/users/page.tsx - Server Component (default)
export default async function UsersPage() {
const users = await getUsers(); // Direct DB access
return <UserList users={users} />;
}
```
### Client Components (when needed)
```typescript
// components/counter.tsx
'use client';
import { useState } from 'react';
export function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}
```
## Server Actions
```typescript
// actions/user-actions.ts
'use server';
import { revalidatePath } from 'next/cache';
import { z } from 'zod';
const CreateUserSchema = z.object({
name: z.string().min(1),
email: z.string().email(),
});
export async function createUser(formData: FormData) {
const validated = CreateUserSchema.safeParse({
name: formData.get('name'),
email: formData.get('email'),
});
if (!validated.success) {
return { error: validated.error.flatten() };
}
const user = await db.insert(users).values(validated.data).returning();
revalidatePath('/users');
return { data: user };
}
```
## Data Fetching
### In Server Components
```typescript
// Direct async/await - no useEffect needed
async function UserProfile({ id }: { id: string }) {
const user = await getUser(id);
if (!user) notFound();
return <Profile user={user} />;
}
```
### With Loading States
```typescript
// ap