@spronta/images-next

@spronta/images-next

Next.js integration for the Spronta image CDN. Drop-in next/image loader and component.

Install

npm install @spronta/images @spronta/images-next

Option 1: Custom loader (global)

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

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

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

// next.config.ts
const config = {
  images: {
    loaderFile: "./lib/spronta-loader.ts",
  },
};

Now every <Image> in your app automatically uses the Spronta CDN.

Option 2: Component (per-image)

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

<SprontaNextImage
  baseUrl="https://cdn.spronta.com"
  project="my-project"
  path="hero.jpg"
  alt="Hero"
  width={1200}
  height={800}
  blurhash="LEHV6nWB2y"
  priority
/>

<SprontaNextImage> wraps next/image with:

• Inline loader routing through the Spronta CDN
• Blurhash → SVG blur placeholder via blurDataURL
• All standard next/image props (priority, fill, sizes, quality)

Requirements

• Next.js 14+
• React 18+
• @spronta/images (core SDK)

License

MIT