Cloud Quickstart

// Server-side: the key never reaches the browser.
const CDN = "https://cdn.openinary.dev";

export async function POST(request: Request) {
  const incoming = await request.formData();
  const file = incoming.get("file");
  if (!(file instanceof File)) {
    return Response.json({ error: "No file" }, { status: 400 });
  }

  const form = new FormData();
  form.append("files", file, file.name);
  form.append("folder", "products");

  const res = await fetch(`${CDN}/upload`, {
    method: "POST",
    headers: { "x-api-key": process.env.OPENINARY_API_KEY! },
    body: form,
  });
  if (!res.ok) {
    // 402 means a plan limit was reached, see /cloud/api#errors
    return Response.json(await res.json(), { status: res.status });
  }

  const { files } = await res.json();
  // Store the path; build URLs from it wherever you render.
  return Response.json({ path: files[0].path, url: `${CDN}${files[0].url}` });
}

// Client-side: public URLs only, no key involved.
export function ProductImage({ path }: { path: string }) {
  const base = `https://cdn.openinary.dev/b/${process.env.NEXT_PUBLIC_OPENINARY_BUCKET}/t`;
  return (
    <img
      src={`${base}/w_800,c_fill,f_webp/${path}`}
      srcSet={`${base}/w_400,c_fill,f_webp/${path} 400w, ${base}/w_800,c_fill,f_webp/${path} 800w`}
      sizes="(max-width: 640px) 400px, 800px"
      alt=""
    />
  );
}

OPENINARY_API_KEY=oik_...                  # server only
NEXT_PUBLIC_OPENINARY_BUCKET=1f0c7a2e-...  # public, it's in every URL