Route Handlers allow you to create custom request handlers for a given route using the Web Request and Response APIs.
Interactive Simulation Engine
Route Handler Simulation
JSON over UI Components
Client Request
route.ts
Waiting for data...
Simulation: Unlike Pages which return HTML, Route Handlers returnraw data. They are the foundation for your custom APIs and Webhooks.
Executable Code Workbench
page.tsx
Live Code Editor1// app/api/hello/route.ts
2
3export async function GET() {
4 return Response.json({ message: 'Hello World' })
5}
6
7export async function POST(request: Request) {
8 const data = await request.json()
9 return Response.json({ success: true })
10}Mental Model
Your own mini-API. These files (route.ts) don't render UI; they return raw data (JSON, images, etc.).
Why This Exists
To create API endpoints for external tools, handle webhooks, or manage complex data submissions.
Critical Note
"Route Handlers are the only way to talk to a database. No, Server Components can talk to databases directly!"