> ## Documentation Index
> Fetch the complete documentation index at: https://docs.blobrouter.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Next.js

> Upload from a Next.js Route Handler or Server Action — never from the browser with your API key.

<Info>
  **BlobRouter v0.1** · Last updated: August 2026 · Architecture version: **2.0**
</Info>

Keep `@blobrouter/sdk` on the **server** (Route Handlers, Server Actions). The browser should upload to *your* API, not hold `BLOBROUTER_API_KEY`.

```typescript theme={null}
// app/api/upload/route.ts
import { BlobRouter } from "@blobrouter/sdk";
import { NextRequest, NextResponse } from "next/server";

const storage = new BlobRouter({
  apiKey: process.env.BLOBROUTER_API_KEY!,
});

export async function POST(req: NextRequest) {
  const form = await req.formData();
  const file = form.get("file");

  if (!(file instanceof File)) {
    return NextResponse.json({ error: "file required" }, { status: 400 });
  }

  const buffer = Buffer.from(await file.arrayBuffer());

  const result = await storage.upload(buffer, {
    fileName: file.name,
    contentType: file.type || "application/octet-stream",
    fileSizeBytes: buffer.length,
    priority: "hot",
  });

  return NextResponse.json(result);
}
```

Client:

```typescript theme={null}
const body = new FormData();
body.append("file", fileInput.files[0]);
await fetch("/api/upload", { method: "POST", body });
```

See [TypeScript SDK](/sdk/typescript) and [Request lifecycle](/request-lifecycle).