Route Handlers and Proxy

What a Route Handler is

A Route Handler is an HTTP endpoint written in app/: a route.ts file that exports functions named after HTTP methods. It receives a standard Request and returns a standard Response — exactly the Web APIs from the fetch lesson.

// app/api/posts/route.ts  →  /api/posts
export async function GET(request: Request) {
  const q = new URL(request.url).searchParams.get('q') ?? ''
  return Response.json(await searchPosts(q))
}

export async function POST(request: Request) {
  const body = await request.json()
  return Response.json(await createPost(body), { status: 201 })
}

• Supported methods: GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS.
• A route.ts and a page.tsx can't live in the same folder.
• Dynamic segments work the same: app/api/posts/[id]/route.ts.

When to use Route Handlers

What Proxy is

Proxy (proxy.ts at the project root — formerly middleware) is code that runs before every matching request, before it reaches the page. It can redirect, rewrite the URL, change headers and cookies, or respond directly.

// proxy.ts
import { NextResponse, type NextRequest } from 'next/server'

export function proxy(request: NextRequest) {
  if (!request.cookies.has('session') && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL(`/login?next=${request.nextUrl.pathname}`, request.url))
  }
}

export const config = { matcher: ['/dashboard/:path*'] }

This app uses proxy.ts to give you the anonymous vid cookie and to send you to the right language.

What goes in the proxy — and what doesn't

Summary

• A Route Handler = route.ts with GET/POST functions, Request → Response.
• For webhooks and external APIs; your own forms go through Server Actions.
• Proxy runs before the request: redirects, headers, cookies — fast and simple.

Official sources

• Next.js — Route Handlers
• Next.js — Proxy
• Next.js — Backend for Frontend