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
• A Next.js project

Guide

1. Install the package.

   npm

   npm install @autorender/nextjs
   

   yarn add @autorender/nextjs
   

   pnpm add @autorender/nextjs
   

   bun add @autorender/nextjs
   
2. Configure Next.js and add the provider.

   Wrap your config with withAutorender in next.config.js or next.config.ts:

   next.config.ts

   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:

   app/layout.tsx

   '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>
     );
   }
   

3. Render your first image.

   Use <ARImage> in place of next/image for transforms and a responsive srcset.

   app/product/page.tsx

   '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.

Examples

Complete transform example

app/hero/page.tsx

'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

app/product-video/page.tsx

'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.

app/upload/page.tsx

'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

Image transformations

Every parameter you can pass to transformations.

Direct upload API

The upload endpoint behind the widget.

Video transformations

Resize, trim, and thumbnail video for <ARVideo>.

All SDKs

Front-end and backend SDKs for every stack.