Next.js App Router

my-next-app/
├── next.config.ts                  # withTaser(nextConfig) with serverDir, entry, basePath
├── tsconfig.json                   # paths: @/*, @/.taser/* and .taser include
├── package.json
├── .taser/                         # Auto-generated disk artifacts & ambient types
│   ├── entry.ts                    # Exports compiled `app` with routes
│   ├── manifest.ts                 # Static route manifest tree
│   ├── app.ts                      # Composed router module
│   └── types/                      # Generated TypeScript ambient route declarations
└── src/
    ├── app/                        # Next.js App Router (React UI & Pages)
    │   ├── layout.tsx              # Root HTML shell
    │   ├── page.tsx                # RSC page fetching from Taser API
    │   └── api/
    │       └── [[...slug]]/
    │           └── route.ts        # Catch-all route handler forwarding to app.fetch()
    ├── server/                     # Taser REST API Subsystem
    │   ├── taser.ts                # createTaserApp instance definition
    │   ├── context.ts              # Boot and request context
    │   └── routes/                 # File-based REST endpoints
    │       ├── $.ts                # Root layout middleware (optional)
    │       └── users.get.ts        # GET /api/users endpoint
    └── client.ts                   # createClient({ baseUrl: ... }) singleton

import { api } from "@/client";

export const dynamic = "force-dynamic";

export default async function HomePage() {
  const res = await api.users.$get({
    query: { limit: 20 },
  });

  if (res.status !== 200) {
    return <div>Failed to load users.</div>;
  }

  const { users } = await res.json();

  return (
    <main className="p-8">
      <h1 className="text-2xl font-bold">User Directory</h1>
      <ul className="mt-4 space-y-2">
        {users.map((user) => (
          <li key={user.id} className="p-3 border rounded">
            <span className="font-semibold">{user.name}</span> ({user.email})
          </li>
        ))}
      </ul>
    </main>
  );
}

"use server";

import { revalidatePath } from "next/cache";
import { api } from "@/client";

export async function createUserAction(formData: FormData) {
  const name = formData.get("name") as string;
  const email = formData.get("email") as string;

  const res = await api.users.$post({
    body: { name, email },
  });

  if (res.status === 201) {
    revalidatePath("/");
    return { success: true };
  }

  return { success: false, error: "Failed to create user" };
}

"use client";

import { useQuery } from "@tanstack/react-query";
import { api } from "@/client";

export function UserList() {
  const { data, isLoading } = useQuery({
    queryKey: ["users"],
    queryFn: async () => {
      const res = await api.users.$get({ query: { limit: 10 } });
      if (res.status === 200) {
        return await res.json();
      }
      throw new Error("Failed to fetch users");
    },
  });

  if (isLoading) return <div>Loading users...</div>;
  return (
    <div>
      {data?.users.map((u) => (
        <div key={u.id}>{u.name}</div>
      ))}
    </div>
  );
}