> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tenbyte.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Next.js

> Use Tenbyte Image Optimization with the Next.js Image component via a custom loader. Works with App Router and Pages Router.

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](/docs/cdn/distributions/image-optimizer).
* The Tenbyte CDN hostname for your account: `your-distribution.tenbytecdn.com`.

## Setup

<CodeGroup>
  ```javascript utils/imageloader.js theme={null}
  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`;
  }
  ```

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

  module.exports = nextConfig;
  ```

  ```bash .env.local theme={null}
  NEXT_PUBLIC_IMAGE_ORIGIN=images.yoursite.com
  NEXT_PUBLIC_TENBYTE_HOST=your-distribution.tenbytecdn.com
  ```
</CodeGroup>

## Use the Image component

```jsx theme={null}
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:

```text theme={null}
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

```bash theme={null}
# In the rendered HTML, inspect the srcset
curl -sS http://localhost:3000 | grep -oE 'tenbytecdn\.com[^"]+' | head -3
```

Should look like:

```text theme={null}
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](https://nextjs.org/docs/app/api-reference/components/image#loader)