Direct-to-R2 Uploads with Presigned URLs in Next.js 15

When building file upload features in web apps, you have two options: Proxy through your server — client → your API → storage Presigned URLs — client uploads directly to storage (your server just mints a short-lived URL) Option 2 is almost always better for large files. Your server never touches the bytes, you save bandwidth costs, and uploads are faster. Here's how to wire it up with Cloudflare R2 and Next.js 15. What is a Presigned URL? A presigned URL is a time-limited, signed URL that grants the holder permission to perform a specific operation on a storage bucket — typically a PUT (upload) or GET (download). Your server generates the URL using its secret credentials, then hands it to the client. The client uploads directly to R2, and your server credentials are never exposed. Client -> POST /api/projects/:id/upload -> Server Server -> PutObjectCommand (signed) -> R2 Server -> { uploadUrl, key } -> Client Client -> PUT uploadUrl (with file) -> R2 directly Setting Up the R2 Client C