API Docs

2c:["$","div","3",{"className":"mb-8","children":[["$","h2",null,{"id":"generating-a-spec-from-zod-schemas-in-next-js","className":"font-display font-bold text-xl text-text mb-3 scroll-mt-20","children":"Generating a spec from Zod schemas in Next.js"}],"$undefined","$undefined","$undefined","$undefined","$undefined","$undefined",["$","div",null,{"className":"mb-4 rounded border border-border overflow-hidden","children":[["$","div",null,{"className":"px-4 py-2 border-b border-border bg-surface-2","children":["$","p",null,{"className":"text-xs font-semibold text-text","children":"Add OpenAPI documentation to a Next.js API"}]}],["$","div",null,{"className":"divide-y divide-border","children":[["$","div","0",{"className":"px-4 py-3 flex gap-3","children":[["$","span",null,{"className":"shrink-0 w-5 h-5 rounded-full flex items-center justify-center text-xs font-bold mt-0.5","style":{"background":"#8B5CF620","color":"#8B5CF6"},"children":1}],["$","div",null,{"className":"flex-1 min-w-0","children":[["$","p",null,{"className":"text-sm text-text mb-0.5","children":"Install zod-openapi and @hono/zod-openapi or use zodToJsonSchema"}],["$","code",null,{"className":"text-xs font-mono text-text-dim bg-bg border border-border rounded px-2 py-0.5 block mt-1 whitespace-pre-wrap","children":"npm install zod-to-json-schema"}],"$undefined",["$","p",null,{"className":"text-xs text-text-muted mt-1 italic","children":"zod-to-json-schema converts your existing Zod validation schemas into JSON Schema, which is the backbone of OpenAPI"}]]}]]}],["$","div","1",{"className":"px-4 py-3 flex gap-3","children":[["$","span",null,{"className":"shrink-0 w-5 h-5 rounded-full flex items-center justify-center text-xs font-bold mt-0.5","style":{"background":"#8B5CF620","color":"#8B5CF6"},"children":2}],["$","div",null,{"className":"flex-1 min-w-0","children":[["$","p",null,{"className":"text-sm text-text mb-0.5","children":"Define your schemas with Zod (as you would for validation)"}],["$","code",null,{"className":"text-xs font-mono text-text-dim bg-bg border border-border rounded px-2 py-0.5 block mt-1 whitespace-pre-wrap","children":"import { z } from 'zod'\n\nexport const CreateProductSchema = z.object({\n name: z.string().min(1).max(100).describe('The product name'),\n price: z.number().positive().describe('Price in cents'),\n category: z.enum(['electronics', 'clothing', 'books']),\n})\n\nexport const ProductResponseSchema = CreateProductSchema.extend({\n id: z.string().cuid2(),\n createdAt: z.string().datetime(),\n})"}],"$undefined","$undefined"]}]]}],["$","div","2",{"className":"px-4 py-3 flex gap-3","children":[["$","span",null,{"className":"shrink-0 w-5 h-5 rounded-full flex items-center justify-center text-xs font-bold mt-0.5","style":{"background":"#8B5CF620","color":"#8B5CF6"},"children":3}],["$","div",null,{"className":"flex-1 min-w-0","children":[["$","p",null,{"className":"text-sm text-text mb-0.5","children":"Create an API route that serves the spec"}],["$","code",null,{"className":"text-xs font-mono text-text-dim bg-bg border border-border rounded px-2 py-0.5 block mt-1 whitespace-pre-wrap","children":"// app/api/openapi.json/route.ts\nimport { NextResponse } from 'next/server'\nimport spec from '@/lib/openapi-spec'\n\nexport function GET() {\n return NextResponse.json(spec)\n}"}],"$undefined","$undefined"]}]]}],["$","div","3",{"className":"px-4 py-3 flex gap-3","children":[["$","span",null,{"className":"shrink-0 w-5 h-5 rounded-full flex items-center justify-center text-xs font-bold mt-0.5","style":{"background":"#8B5CF620","color":"#8B5CF6"},"children":4}],["$","div",null,{"className":"flex-1 min-w-0","children":[["$","p",null,{"className":"text-sm text-text mb-0.5","children":"Add Scalar UI for interactive docs"}],["$","code",null,{"className":"text-xs font-mono text-text-dim bg-bg border border-border rounded px-2 py-0.5 block mt-1 whitespace-pre-wrap","children":"// app/api/docs/route.ts\nexport function GET() {\n const html = `\nAPI Docs\n\n\n\n`\n return new Response(html, { headers: { 'Content-Type': 'text/html' } })\n}"}],"$undefined","$undefined"]}]]}]]}]]}],"$undefined"]}]

OpenAPI and Documentation