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)

// 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)

"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

"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:

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

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

State Management Stack

TanStack Query for Server State

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

Zustand for Client State

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)
• Tailwind CSS v4 - Utility-first styling

Database Patterns

Drizzle ORM (Type-safe, lightweight)

const posts = await db.select().from(postsTable).where(eq(postsTable.authorId, userId));

Prisma (DX-focused, migrations)

const posts = await prisma.post.findMany({ where: { authorId: userId } });

Performance Imperatives

1. Eliminate waterfalls - Use Promise.all() for parallel fetches
2. Stream with Suspense - Progressive rendering
3. Minimize 'use client' - Every directive increases bundle
4. Use Route Segment Config - dynamic, revalidate options

Core Web Vitals Targets

• LCP < 2.5s (Largest Contentful Paint)
• INP < 200ms (Interaction to Next Paint)
• CLS < 0.1 (Cumulative Layout Shift)

Agents

• frontend-developer - React, styling, components, performance
• backend-architect - APIs, auth, system design
• rapid-prototyper - MVPs in days, not weeks
• database-specialist - Schema, queries, migrations, optimization

Deep Dives

• [references/react-19-patterns.md](references/react-19-patterns.md)
• [references/nextjs-app-router.md](references/nextjs-app-router.md)
• [references/state-management.md](references/state-management.md)
• [references/database-patterns.md](references/database-patterns.md)

Examples

• [examples/nextjs-app-starter/](examples/nextjs-app-starter/)
• [examples/trpc-stack/](examples/trpc-stack/)
• [examples/auth-patterns/](examples/auth-patterns/)