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:

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

Database Patterns

Drizzle ORM (Type-safe, lightweight)

tsx

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

Prisma (DX-focused, migrations)

tsx

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

Performance Imperatives

•Eliminate waterfalls - Use Promise.all() for parallel fetches
•Stream with Suspense - Progressive rendering
•Minimize 'use client' - Every directive increases bundle
•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

fullstack