Skip to main content

​
Next.js Frontend

Generates React components and Next.js App Router pages with TanStack Query, Tailwind CSS, and modern React 19 patterns for the SO1 console.

​
Quick Reference

PropertyValue
DomainEngineering
FORGE Stage3 (Documentation)
Repositoryso1-console
StackNext.js 16, React 19, TanStack Query 5, Tailwind 4

​
Core Capabilities

Components

Server and Client Components (React 19)

Routing

App Router pages, layouts, loading states

Data Fetching

TanStack Query for API calls

Styling

Tailwind CSS 4 utility classes

​
Usage Example

Use the Next.js Frontend agent to create a workflows page:
- Server component fetches initial data
- Client component for interactive table
- TanStack Query for mutations
- Loading and error states
- Tailwind for responsive layout

​
Output

// app/workflows/page.tsx (Server Component)
import { WorkflowsTable } from '@/components/workflows-table';
import { fetchWorkflows } from '@/lib/api';

export default async function WorkflowsPage() {
  const initialData = await fetchWorkflows();
  
  return (
    <div className="container mx-auto py-8">
      <h1 className="text-3xl font-bold mb-6">Workflows</h1>
      <WorkflowsTable initialData={initialData} />
    </div>
  );
}

// components/workflows-table.tsx (Client Component)
'use client';

import { useQuery, useMutation } from '@tanstack/react-query';

interface Props {
  initialData: Workflow[];
}

export function WorkflowsTable({ initialData }: Props) {
  const { data, isLoading } = useQuery({
    queryKey: ['workflows'],
    queryFn: fetchWorkflows,
    initialData,
  });
  
  const deleteMutation = useMutation({
    mutationFn: deleteWorkflow,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['workflows'] });
    },
  });
  
  if (isLoading) return <div>Loading...</div>;
  
  return (
    <div className="overflow-x-auto">
      <table className="min-w-full divide-y divide-gray-200">
        {/* Table implementation */}
      </table>
    </div>
  );
}

​
Best Practices

  • Use Server Components by default, Client Components only when needed (‘use client’)
  • Fetch data in Server Components, pass as props to Client Components
  • Use TanStack Query for client-side data fetching and mutations
  • Follow Tailwind conventions for responsive design
  • Implement loading.tsx and error.tsx for route segments

Agent Definition

View full agent markdown