{
  "instruction": "Use Route Handlers for external API endpoints and Server Actions for internal UI mutations",
  "relevant_when": "Agent builds a Next.js App Router application with API endpoints or form submissions",
  "context": "Next.js App Router has two distinct mechanisms: Route Handlers (app/api/*/route.ts) for external consumers, webhooks, and REST endpoints, and Server Actions ('use server' functions) for form submissions and mutations from React components. Using the wrong one causes architectural problems -- Route Handlers for internal forms adds unnecessary network overhead, while Server Actions for external API creates endpoints that only accept POST and cannot be consumed by third parties.",
  "sources": [
    {
      "type": "file",
      "filename": "skills/nextjs-api-patterns/SKILL.md",
      "tile": "tessl-labs/nextjs-api-patterns@0.2.0"
    }
  ],
  "checklist": [
    {
      "name": "route-handler-for-external-api",
      "rule": "External-facing API endpoints are implemented as Route Handlers in app/api/*/route.ts files that export named HTTP method functions (GET, POST, PUT, DELETE) -- not as Server Actions",
      "relevant_when": "Agent builds API endpoints meant to be consumed by external clients, webhooks, or third-party services"
    },
    {
      "name": "server-actions-for-mutations",
      "rule": "Form submissions and UI-triggered mutations use Server Actions (functions in files marked 'use server') with revalidatePath/revalidateTag, not client-side fetch to Route Handlers",
      "relevant_when": "Agent builds forms or mutation triggers in a Next.js App Router application"
    },
    {
      "name": "server-actions-revalidate",
      "rule": "Server Actions call revalidatePath() or revalidateTag() after successful mutations so the UI reflects the updated data",
      "relevant_when": "Agent writes Server Actions that modify data"
    }
  ]
}