start-core/server-routes

Name: start-core/server-routes
Availability: InStock
Author: mehdi

Implements server-side API endpoints in TanStack Start using createFileRoute server handlers.

1.4k|34|Updated Mar 7, 2024

Search Tags:#react #tanstack start #middleware #file-based routing #api endpoints #http handlers #server routes

Ready to run

npx skills add https://github.com/mehdibha/dotUI --skill start-core-server-routes-mehdibha

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: start-core/server-routes
Source: https://github.com/mehdibha/dotUI/tree/main/.claude/skills/tanstack-start-server-routes
Command: npx skills add https://github.com/mehdibha/dotUI --skill start-core-server-routes-mehdibha

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/react-router.

What problem does it solve? Building backend API endpoints in a TanStack Start application requires knowing how to attach HTTP method handlers to file-based routes, parse request bodies, manage dynamic params, and apply middleware correctly. ## Core Features & Use Cases - HTTP Method Handlers: Define GET, POST, PUT, and DELETE handlers via the server property on createFileRoute, returning standard Response objects. - Routing Conventions: Supports dynamic params ($id), splat/wildcard routes ($), and escaped dots, with rules to avoid duplicate route path conflicts. - Middleware Support: Apply middleware to all handlers at the route level or per-handler using createHandlers for fine-grained control. - Use Case: Create a /api/users endpoint that parses a JSON POST body, validates it with middleware, and returns a JSON response with proper status codes. ## Quick Start Ask the AI to create a TanStack Start server route at src/routes/api/users.ts with GET and POST handlers that parse the request body and return JSON responses.

Frequently Asked Questions about start-core/server-routes

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create an API route in TanStack Start?▼

Create a file in src/routes and use createFileRoute with the server property containing handlers for HTTP methods like GET or POST. Each handler receives the request object and returns a standard Response, such as Response.json for JSON payloads.

How do I add middleware to TanStack Start server routes?▼

Add a middleware array to the server property to run middleware for all handlers, or use createHandlers to attach middleware to specific handlers like POST only. Route-level middleware runs first, followed by handler-specific middleware.

Can a TanStack Start route have both a page component and API handlers?▼

Yes, a single route file can define both server handlers and a UI component on the same createFileRoute call. The component renders for browser navigation while the handlers respond to direct HTTP method requests like POST.

How do I access dynamic route params in TanStack Start server handlers?▼

Handlers receive a params object containing dynamic path segments, such as params.id for a $id.ts file. Splat routes defined with $.ts expose the wildcard portion through params._splat.

Why does my TanStack Start server route return a Promise instead of body data?▼

Request body methods like request.json(), request.text(), and request.formData() return Promises that must be awaited. Forgetting await leaves you with an unresolved Promise instead of the parsed body content.

When should I use server routes versus server functions in TanStack Start?▼

Use server routes when you need raw HTTP control over methods, headers, and status codes for REST-style APIs or webhooks. Use server functions for RPC-style calls from your React components where HTTP semantics are unnecessary.