Next.js

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`;
}

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    loader: "custom",
    loaderFile: "./utils/imageloader.js",
  },
};

module.exports = nextConfig;

NEXT_PUBLIC_IMAGE_ORIGIN=images.yoursite.com
NEXT_PUBLIC_TENBYTE_HOST=your-distribution.tenbytecdn.com

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

Home

Account & Organization

Vidinfra

Live Streaming

CDN

Cloud

Prerequisites

Setup

Use the Image component

Verify

Tips

Reference

​Prerequisites

​Setup

​Use the Image component

​Verify

​Tips

​Reference

Prerequisites

Setup

Use the Image component

Verify

Tips

Reference