fullstack

# Fullstack Development

Build modern web applications with React 19, Next.js 15+, and server-first architecture.

## Quick Reference

### React 19 + Next.js 15 Patterns

**Server Components (Default)**

```tsx
// app/page.tsx - Server Component by default
export default async function Page() {
  const data = await db.query("SELECT * FROM posts"); // Direct DB access
  return <PostList posts={data} />;
}
```

**Client Components (Opt-in)**

```tsx
"use client";
// Only for interactivity: useState, useEffect, event handlers
export function LikeButton({ postId }) {
  const [liked, setLiked] = useState(false);
  return <button onClick={() => setLiked(!liked)}>Like</button>;
}
```

**Server Actions**

```tsx
"use server";
export async function createPost(formData: FormData) {
  const title = formData.get("title");
  await db.insert(posts).values({ title });
  revalidatePath("/posts");
}
```

### React Compiler (Auto-Memoization)

Enable in `next.config.js`:

```js
module.exports = {
  experimental: {
    reactCompiler: true,
  },
};
```

**No more manual memoization** - the compiler handles `useMemo`, `useCallback`, `React.memo` automatically.

### State Management Stack

| Need                | Solution              |
| ------------------- | --------------------- |
| Server state        | TanStack Query        |
| Global client state | Zustand               |
| Atomic state        | Jotai                 |
| Form state          | React Hook Form + Zod |
| URL state           | nuqs                  |

**TanStack Query for Server State**

```tsx
const { data, isLoading } = useQuery({
  queryKey: ["posts"],
  queryFn: () => fetch("/api/posts").then((r) => r.json()),
});
```

**Zustand for Client State**

```tsx
const useStore = create((set) => ({
  theme: "dark",
  setTheme: (theme) => set({ theme }),
}));
```

### Component Libraries (2026)

**Recommended Stack:**

- **shadcn/ui** - Copy-paste components, full control
- **Base UI** - Unstyled primitives (replacing Radix