Libraries/6 of 24

React / Next.js

Drop-in upload UI with a server-only API key.

comprestack-react is a drop-in UI, not a second API. The browser posts to your Route Handler; that handler calls Comprestack with a server-only key.

  • Set COMPRESTACK_API_KEY in .env.local — never NEXT_PUBLIC_*.
  • createOptimizeHandler from comprestack-react/server.
  • <CompressDropzone /> uploads to that route and shows size savings.
Copy-paste
npm install comprestack-react comprestack

// app/api/optimize/route.ts  (server-only key)
import { createOptimizeHandler } from "comprestack-react/server"
export const POST = createOptimizeHandler({ format: "webp" })

// app/page.tsx  (client UI — no API key here)
"use client"
import { CompressDropzone } from "comprestack-react"
import "comprestack-react/styles.css"

export default function Page() {
  return <CompressDropzone action="/api/optimize" />
}