Skip to main content
Next.js (v10+) ships a built-in <Image> component. Plug Tenbyte into it with a custom loader — a few lines of config, no extra dependencies.

​
Prerequisites

  • Next.js 10+ (App Router or Pages Router).
  • A Tenbyte distribution with Image Optimizer enabled.
  • The Tenbyte CDN hostname for your account: your-distribution.tenbytecdn.com.

​
Setup

export default function tenbyteLoader({ src, width, quality }) {
  // Rewrite known origin domains to Tenbyte CDN; pass everything else through unchanged.
  if (src.includes(process.env.NEXT_PUBLIC_IMAGE_ORIGIN)) {
    const url = new URL(src);
    url.hostname = process.env.NEXT_PUBLIC_TENBYTE_HOST;
    url.searchParams.set("w", width);
    url.searchParams.set("q", quality || 80);
    url.searchParams.set("format", "auto");
    return url.toString();
  }
  return `${src}?w=${width}&q=${quality || 80}&format=auto`;
}

​
Use the Image component

import Image from "next/image";

export default function Hero() {
  return (
    <Image
      src="https://images.yoursite.com/hero.jpg"
      alt="Hero"
      width={1200}
      height={600}
      sizes="(max-width: 768px) 100vw, 1200px"
      priority
    />
  );
}
Next.js will call tenbyteLoader for each srcset width, generating URLs like: 
https://your-distribution.tenbytecdn.com/hero.jpg?w=1200&q=80&format=auto
https://your-distribution.tenbytecdn.com/hero.jpg?w=640&q=80&format=auto

​
Verify

# In the rendered HTML, inspect the srcset
curl -sS http://localhost:3000 | grep -oE 'tenbytecdn\.com[^"]+' | head -3
Should look like: 
your-distribution.tenbytecdn.com/hero.jpg?w=640&q=80&format=auto
your-distribution.tenbytecdn.com/hero.jpg?w=1080&q=80&format=auto
your-distribution.tenbytecdn.com/hero.jpg?w=1920&q=80&format=auto

​
Tips

  • Set sizes — without it, Next.js requests the largest variant for every screen.
  • Use priority sparingly — only for above-the-fold images. It bypasses lazy-loading.
  • Whitelist domains — images.yoursite.com should be in images.remotePatterns if you’re on App Router with stricter checks.
  • Avoid unoptimized — that disables the loader and ships the master file. The whole point of Tenbyte is to skip that.
  • Cap quality at 80 — visual difference vs 90 is negligible, bytes drop a lot.

​
Reference

Next.js Image documentation