API proxy rewrite

API proxy rewrite is a Next.js boilerplate template that proxies an external API through your own Vercel domain via a vercel.ts rewrite rule, adding CDN caching and targeted cache purging.

What is API proxy rewrite?

API proxy rewrite is a Vercel example template that intercepts requests to /api/external/:path* on your domain and rewrites them to a backend API configured through the EXTERNAL_API_URL environment variable. The rewritten responses are cached on Vercel's CDN and tagged with a cache tag, so you can purge them selectively. It is built on Next.js and designed to run on the Vercel platform.

Key Features

• One-line rewrite configuration — Define the proxy in a vercel.ts file using the routes.rewrite helper, so no custom server code is required.
• CDN caching — CDN-Cache-Control: public, max-age=60, stale-while-revalidate=3600 sets a 1-minute edge cache with a 1-hour stale-while-revalidate window.
• Cache tagging — Every proxied response is labeled with Vercel-Cache-Tag: api, allowing you to invalidate only /api/external responses via the Vercel Dashboard or CLI.
• Environment-driven backend — Set EXTERNAL_API_URL to point to any REST API; the template defaults to https://jsonplaceholder.typicode.com.
• Security benefit — Proxying through Vercel puts the Vercel Firewall in front of your backend, adding a security layer.
• Demo blog page — The included Next.js app fetches /api/external/posts and renders blog posts to demonstrate the proxy working end to end.
• One-click deploy — Deploy directly from the repository with a preconfigured Vercel project, or clone with pnpm create next-app --example.
• No-code alternative documented — For users who prefer not to code, the README points to Vercel project-level routing rules.

Who should use it?

This template suits developers deploying on Vercel who want to place their backend behind Vercel's CDN and caching layer. It is also useful for teams that need to consolidate multiple API origins behind a single domain path, and for developers who want a minimal, configuration-driven approach to API proxying without writing serverless functions.

What can you do with API proxy rewrite?

• Frontend developers: proxy third-party APIs through your own domain to avoid CORS issues, centralize API access, and benefit from edge caching.
• Vercel users: add Vercel Firewall protection in front of an existing backend by routing requests through a rewritten path.
• API providers: serve cached responses from the edge, reducing backend request volume and cost.

How does it work?

1. The Next.js app requests /api/external/posts.
2. The vercel.ts rewrite matches /api/external/:path* and proxies the request to the URL in EXTERNAL_API_URL.
3. Vercel applies the CDN-Cache-Control and Vercel-Cache-Tag headers, caching the response at the edge.
4. After 60 seconds, stale content is served while a fresh copy is fetched in the background (stale-while-revalidate).

FAQ

How do I proxy my own API?

Set the EXTERNAL_API_URL environment variable in your Vercel project settings to your backend URL, then redeploy. The template uses https://jsonplaceholder.typicode.com by default if the variable is not set.

How do I purge cached responses?

Use the Vercel Dashboard under CDN > Caches, select Cache Tag, enter api, and click Purge. Or run vercel cache invalidate --tag api from the CLI.

Does this work without writing code?

Yes, Vercel also supports project-level routing rules through the Dashboard, CLI, API, or SDK. The README links to a separate template for that no-code approach.