@spronta/images-next — next/image loader and image component.

Next.js SDK (`@spronta/images-next`)

Two ways to use Spronta with Next.js: a custom next/image loader, or a drop-in image component.

Install

npm install @spronta/images-next

Option 1: Custom loader

Create a loader file and reference it in next.config.ts:

// spronta-loader.ts
import { createSprontaLoader } from "@spronta/images-next";

export default createSprontaLoader({
  baseUrl: "https://cdn.spronta.com",
  project: "my-project",
  defaults: { quality: "medium" },
});

// next.config.ts
export default {
  images: {
    loader: "custom",
    loaderFile: "./spronta-loader.ts",
  },
};

Now every in your app uses Spronta:

import Image from "next/image";

<Image src="hero.jpg" width={1920} height={1080} alt="Hero" />
// → https://cdn.spronta.com/my-project/hero.jpg?w=1920&q=medium&f=auto

Option 2: SprontaNextImage component

For more control (blurhash placeholders, per-image config):

import { SprontaNextImage } from "@spronta/images-next";

const config = {
  baseUrl: "https://cdn.spronta.com",
  project: "my-project",
};

<SprontaNextImage
  config={config}
  path="hero.jpg"
  alt="Hero"
  width={1920}
  height={1080}
  transforms={{ gravity: "auto", format: "webp" }}
  blurhash="LEHV6nWB2yk8pyo0adR*.7kCMdnj"
  priority
/>

Props

Prop	Type	Default	Description
`config`	SprontaConfig	—	Spronta configuration
`path`	string	—	Image path
`alt`	string	—	Alt text
`width`	number	—	Width
`height`	number	—	Height
`transforms`	TransformOptions	—	CDN transforms
`blurhash`	string	—	BlurHash for placeholder
`priority`	boolean	false	Preload (above-the-fold images)
`fill`	boolean	false	Fill parent container
`sizes`	string	—	Responsive sizes
`quality`	number	—	Quality override
`className`	string	—	CSS class
`objectFit`	string	"cover"	Object fit style

Blurhash placeholder