Works with your stack

// next.config.ts
const nextConfig = {
  images: {
    remotePatterns: [{ hostname: "cdn.spronta.com" }],
  },
};

// In your component — Next.js Image + Spronta transforms
import Image from "next/image";

<Image
  src={`https://cdn.spronta.com/${projectId}/${imageId}`}
  width={800}
  height={600}
  alt="Product photo"
/>

// Or use Spronta's URL params directly for full control
const src = `https://cdn.spronta.com/${projectId}/${imageId}?w=800&fit=cover`;

// Upload an image from Node.js
const { uploadUrl, imageId } = await fetch(
  `https://app.spronta.com/api/images/projects/${PROJECT_ID}/upload`,
  {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${API_KEY}`,
    },
    body: JSON.stringify({
      filename: "photo.jpg",
      contentType: "image/jpeg",
      fileSize: buffer.byteLength,
    }),
  }
).then((r) => r.json());

// Upload directly to R2
await fetch(uploadUrl, { method: "PUT", body: buffer });

// Confirm and get CDN URL
const { url } = await fetch(
  `https://app.spronta.com/api/images/projects/${PROJECT_ID}/upload/confirm`,
  {
    method: "POST",
    headers: { Authorization: `Bearer ${API_KEY}`, "Content-Type": "application/json" },
    body: JSON.stringify({ imageId }),
  }
).then((r) => r.json());

// url = "https://cdn.spronta.com/{projectId}/{imageId}"
console.log(`${url}?w=400&fit=cover`);