Autorender Next.js SDK

Introduction

Autorender Next.js SDK provides a simple way to integrate Autorender with your Next.js applications (App Router and Pages Router). It allows you to:

• Upload files with a fully-featured, customizable upload widget (<AutorenderUploader>)
• Serve optimized images with automatic format selection, responsive sizes, and real-time transformations (<ARImage>, <AutoRenderProvider>)
• Stream video with HLS and DASH support via an optional Video.js integration (<ARVideo>)

TypeScript support

The SDK is written in TypeScript with full type definitions included. No additional @types packages needed.

Client components: The upload widget and ViewTag components are client-only. In the App Router, all components in this package include 'use client'. In Pages Router, use them directly.

Installation

npm install @autorender/nextjs

Next.js configuration

next/image only allows remote hosts declared in your app’s next.config. Wrap your config with withAutorender so the SDK’s default asset host (assets.autorender.io) and transpilePackages are applied for you:

import type { NextConfig } from 'next';
import { withAutorender } from '@autorender/nextjs/next-config';

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

export default withAutorender(nextConfig);

If you prefer to merge manually, import AUTORENDER_IMAGE_REMOTE_PATTERNS and append it to images.remotePatterns.

Production use

• next.config: Use withAutorender() so next/image allows Autorender asset URLs and the SDK is included in transpilePackages.
• Upload API key: Anything you pass into client components is bundled for the browser. Prefer process.env.NEXT_PUBLIC_AUTORENDER_API_KEY (or another NEXT_PUBLIC_* name you choose) and define it in .env.local / your host’s env; scope and rotate keys in the Autorender dashboard.
• Workspace: The workspace value is not secret; it appears in public image URLs.

Upload SDK Usage

This package provides React components optimized for Next.js. The components are client components, so make sure to use the 'use client' directive.

Basic Example

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

Set NEXT_PUBLIC_AUTORENDER_API_KEY in .env.local (and in your hosting provider’s environment for production builds).

ViewTag SDK Usage

Setup Provider

'use client';

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

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

Use ARImage Component

'use client';

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

export default function ProductPage() {
  return (
    <ARImage
      src="products/shoe.jpg"
      width={400}
      height={400}
      alt="Shoe"
      transformations={{
        fit: 'cover',
      }}
      responsive={true}
      lazy={true}
      sizes="(min-width: 800px) 50vw, 100vw"
    />
  );
}

Use ARVideo Component (Video.js)

Install video.js when you use <ARVideo> (optional peer dependency):

npm install video.js

'use client';

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

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

Supports MP4, HLS (.m3u8), and DASH (.mpd) sources.

Use AR Instance Directly

'use client';

import { useAutoRender } from '@autorender/nextjs';

export default function ImageComponent() {
  const AR = useAutoRender();
  
  const url = AR.url('image.jpg', { w: 300, h: 300, fit: 'cover' });
  const transformString = AR.transformString({ w: 300, h: 300 });
  const dpr = AR.getDPR();
    
  // Generate responsive attributes
  const attrs = AR.responsiveImageAttributes({
    src: 'hero.jpg',
    width: 1200,
    sizes: '(min-width: 800px) 50vw, 100vw',
    transform: { fit: 'cover' }
  });
  
  return (
    <img
      src={attrs.src}
      srcSet={attrs.srcSet}
      sizes={attrs.sizes}
      width={attrs.width}
      alt="Image"
    />
  );
}

API Reference

Upload SDK

All props from @autorender/js are supported, with the addition of:

• containerClassName?: string - Additional CSS class for the container

ViewTag SDK

<AutoRenderProvider />

Next.js Context Provider that makes AR instance available to child components.

Props:

• baseUrl?: string - Base URL (default: 'https://assets.autorender.io')
• workspace: string - Your workspace ID
• defaults?: { f?: string, q?: string | number } - Default transformations
• deviceBreakpoints?: number[] - Device breakpoints
• imageBreakpoints?: number[] - Image breakpoints
• enableDPR?: boolean - Enable device pixel ratio (default: true)
• enableResponsive?: boolean - Enable responsive images (default: true)

<ARImage />

Next.js component that wraps next/image with AutoRender transformations.

Props:

• src: string - Image source path (required)
  • Supports workspace paths (e.g., products/shoe.jpg) and absolute remote URLs (e.g., https://example.com/image.jpg).
• width?: number - Image width in pixels
• height?: number - Image height in pixels
• transformations?: TransformOptions - Transformation options
• responsive?: boolean - Enable responsive images (default: true)
• lazy?: boolean - Enable lazy loading (default: true)
• sizes?: string - Sizes attribute for responsive images
• All standard next/image props are supported (e.g., alt, className, style, priority, fill, etc.)

useAutoRender(): ARInstance

Hook to access the AR instance from context.

Returns: ARInstance with methods:

• url(src: string, transform?: TransformOptions): string - Generate image URL
• transformString(transform: TransformOptions): string - Get transformation string only
• responsiveImageAttributes(options: ResponsiveOptions): ResponsiveAttributes - Generate responsive image attributes
• getDPR(): number - Get device pixel ratio

Documentation

See the full documentation for complete API reference.