- Home
- Skills
- Davepoon
- Buildwithclaude
- Route Handlers
route-handlers_skill
- TypeScript
2.3k
GitHub Stars
1
Bundled Files
2 months ago
Catalog Refreshed
4 months ago
First Indexed
Readme & install
Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.
Installation
Preview and clipboard use veilstrat where the catalogue uses aiagentskills.
npx veilstrat add skill davepoon/buildwithclaude --skill route-handlers- SKILL.md6.9 KB
Overview
This skill helps you create and maintain Next.js App Router route handlers for building API endpoints, handling requests, streaming responses, and managing headers, cookies, CORS, and caching. It focuses on practical code patterns and conventions for route.ts files so you can implement RESTful routes, dynamic params, and AI/LLM streaming quickly.
How this skill works
It inspects the desired endpoint path and maps it to the app/.../route.ts file convention, then scaffolds or explains exported HTTP method handlers (GET, POST, PUT, PATCH, DELETE, OPTIONS, HEAD). It shows how to read request bodies, query and URL params, headers, set responses and headers with NextResponse or Response, manage cookies, return redirects, stream text or LLM output, and implement common error handling and CORS patterns.
When to use it
- You need to add an API endpoint in a Next.js App Router project (route.ts).
- You want to handle POST data, file/form submissions, or JSON bodies.
- You need dynamic route parameters (e.g., /api/posts/[id]).
- You want to stream server-sent events or LLM output to clients.
- You must set cookies, custom headers, redirects, or CORS responses.
- You need guidance on caching behavior or forcing dynamic responses.
Best practices
- Use app/.../route.ts files and export functions named for HTTP methods (GET, POST, etc.).
- Validate and parse request bodies explicitly; return 4xx for validation errors and 5xx for unexpected failures.
- Prefer NextResponse.json for JSON responses and set Cache-Control or dynamic = 'force-dynamic' when freshness is required.
- Implement OPTIONS to handle CORS preflight and add Access-Control-Allow-Origin on responses when needed.
- Use ReadableStream for streaming text or LLM chunks, and set appropriate Content-Type and cache headers.
- Keep side effects (DB, auth) explicit and return clear status codes for clients.
Example use cases
- Create a CRUD users API with app/api/users/route.ts implementing GET and POST.
- Build a streaming chat endpoint that proxies an LLM and forwards chunks to the browser.
- Implement an authenticated resource that reads Authorization header and returns 401 when missing.
- Serve paginated results using query parameters page and limit parsed from request.url.
- Set an httpOnly session cookie on login and redirect to a protected route.
FAQ
Use the RouteContext params object passed to the handler and await context.params to read values like id from app/api/posts/[id]/route.ts.
When should I use NextResponse.json versus new Response?
Use NextResponse.json for standard JSON responses with convenience helpers. Use new Response or ReadableStream when you need custom streaming, non-JSON content-types, or fine-grained control over the body stream.