next.js--typescriptlisted
Install: claude install-skill lgzarturo/codeconductor
# Next.js + TypeScript
## Server vs Client Components
The App Router defaults to Server Components. Every component is a Server
Component unless it explicitly opts in to the client.
### Decision Rule
```text
Does the component need any of the following?
- useState / useReducer
- useEffect / lifecycle methods
- Browser APIs (window, document, localStorage)
- Event listeners (onClick, onChange, onSubmit)
- Third-party libraries that require the DOM
YES → Client Component (`"use client"` directive)
NO → Server Component (default, no directive needed)
```
Keep the `"use client"` boundary as far down the component tree as possible.
Wrap only the interactive leaf node, not the entire page.
### Server Component (default)
```tsx
// app/users/page.tsx — no directive needed
import { db } from '@/lib/db';
export default async function UsersPage() {
// Direct database access — no API round-trip needed
const users = await db.user.findMany({ orderBy: { createdAt: 'desc' } });
return (
<ul>
{users.map(user => (
<li key={user.id}>{user.email}</li>
))}
</ul>
);
}
```
### Client Component
```tsx
// components/ui/counter.tsx
'use client';
import { useState } from 'react';
interface Props {
initialCount?: number;
}
export function Counter({ initialCount = 0 }: Props) {
const [count, setCount] = useState(initialCount);
return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>;
}
```
### Composing Server and