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

# Next.js

> Render optimized images with `<ARImage>` on top of `next/image`, plus config and upload helpers for Next.js apps.

The `@autorender/nextjs` SDK wraps `next/image` with Autorender URL generation through `<ARImage>`, adds a `withAutorender` config helper, and ships the `<AutorenderUploader>` widget for browser uploads.

## Prerequisites

* An Autorender account with a workspace ID — [create one in the dashboard](https://app.autorender.io)
* A Next.js project

## Guide

<Steps>
  <Step title="Install the package.">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @autorender/nextjs
      ```

      ```bash yarn theme={null}
      yarn add @autorender/nextjs
      ```

      ```bash pnpm theme={null}
      pnpm add @autorender/nextjs
      ```

      ```bash bun theme={null}
      bun add @autorender/nextjs
      ```
    </CodeGroup>
  </Step>

  <Step title="Configure Next.js and add the provider.">
    Wrap your config with `withAutorender` in `next.config.js` or `next.config.ts`:

    ```ts next.config.ts {8} theme={null}
    import type { NextConfig } from 'next';
    import { withAutorender } from '@autorender/nextjs/next-config';

    const nextConfig: NextConfig = {
      // your other options
    };

    export default withAutorender(nextConfig);
    ```

    Then set up the provider in your root layout:

    ```tsx app/layout.tsx {9} theme={null}
    'use client';

    import { AutoRenderProvider } from '@autorender/nextjs/viewtag';

    export default function RootLayout({ children }) {
      return (
        <AutoRenderProvider
          baseUrl="https://assets.autorender.io"
          workspace="LOKVTtKVGb"
          defaults={{}}
        >
          {children}
        </AutoRenderProvider>
      );
    }
    ```
  </Step>

  <Step title="Render your first image.">
    Use `<ARImage>` in place of `next/image` for transforms and a responsive `srcset`.

    ```tsx app/product/page.tsx {8} theme={null}
    'use client';

    import { ARImage } from '@autorender/nextjs/viewtag';

    export default function ProductPage() {
      return (
        <ARImage
          src="products/chair.jpg"
          width={400}
          height={400}
          alt="Chair"
          transformations={{ fit: 'cover' }}
          responsive={true}
          lazy={true}
        />
      );
    }
    ```

    This renders a `next/image` resized to **400×400 px**, cropped to fill, with a responsive `srcset`.
  </Step>
</Steps>

## Examples

### Complete transform example

```tsx app/hero/page.tsx theme={null}
'use client';

import { ARImage } from '@autorender/nextjs/viewtag';
import type { TransformOptions } from '@autorender/js/viewtag';

export default function HeroPage() {
  const transform: TransformOptions = {
    w: 1200,
    h: 800,
    fit: 'cover',
    ar: '16:9',
    position: 'center',

    improve: true,
    sharpen: 50,

    layers: [
      {
        type: 'image',
        imagePath: 'logo.png',
        width: 200,
        placement: 'north-east',
      }
    ],
    blend: 'overlay',
  };

  return (
    <ARImage
      src="hero.jpg"
      width={1200}
      height={800}
      alt="Hero image"
      transformations={transform}
      responsive={true}
      className="hero-image"
    />
  );
}
```

### Video component

```tsx app/product-video/page.tsx theme={null}
'use client';

import { ARVideo } from '@autorender/nextjs/viewtag';

export default function ProductVideoPage() {
  return (
    <ARVideo
      src="docs/skateboarding.mp4"
      width={960}
      height={540}
      controls
      preload="metadata"
      transformations={{ w: 960, h: 540 }}
    />
  );
}
```

### Upload widget

The widget runs in the browser, so pass a public key from `NEXT_PUBLIC_AUTORENDER_API_KEY`. Never hardcode the key.

```tsx app/upload/page.tsx {8} theme={null}
'use client';

import { AutorenderUploader } from '@autorender/nextjs';
import '@autorender/nextjs/styles';

export default function UploadPage() {
  return (
    <AutorenderUploader
      apiKey={process.env.NEXT_PUBLIC_AUTORENDER_API_KEY!}
      folderPath="uploads"
    />
  );
}
```

## API reference

### `withAutorender(nextConfig)`

Wraps your Next.js config to add Autorender optimizations. Import from `@autorender/nextjs/next-config`.

### `<ARImage />`

Wraps `next/image` with Autorender URL generation. Accepts all `next/image` props except `src` and `srcSet`. `width`, `height`, and `sizes` are passed through — Autorender uses them to build the transformed URL and responsive `srcset`. Lazy loading is handled natively by `next/image`; use `priority` for above-the-fold images instead.

**Props:**

* `src: string` — image source path (required)
* `width?: number` — image width in pixels
* `height?: number` — image height in pixels
* `transformations?: TransformOptions` — transformation options
* `responsive?: boolean` — responsive images (default `true`)
* `sizes?: string` — `sizes` attribute for responsive images
* `priority?: boolean` — disable lazy loading for above-the-fold images (default `false`)
* `placeholder?: 'blur' | 'empty'` — placeholder while the image loads
* `blurDataURL?: string` — base64 data URL for the blur placeholder
* `quality?: number` — image quality, **1–100**
* `fill?: boolean` — fill the parent container (omit `width`/`height` when using this)

### `<ARVideo />`

Wraps Video.js with Autorender URL generation. Props: `src`, `width`, `height`, `controls`, `preload`, `transformations`.

## Next steps

<CardGroup cols={2}>
  <Card title="Image transformations" icon="wand-magic-sparkles" iconType="solid" href="/docs/transformations/introduction">
    Every parameter you can pass to `transformations`.
  </Card>

  <Card title="Direct upload API" icon="cloud-arrow-up" iconType="solid" href="/docs/api-reference/direct-upload">
    The upload endpoint behind the widget.
  </Card>

  <Card title="Video transformations" icon="film" iconType="solid" href="/docs/video/introduction">
    Resize, trim, and thumbnail video for `<ARVideo>`.
  </Card>

  <Card title="All SDKs" icon="cubes" iconType="solid" href="/docs/resources/sdks">
    Front-end and backend SDKs for every stack.
  </Card>
</CardGroup>