Skip to main content
The Vercel adapter automatically configures Next.js Image Optimization for deployment on Vercel’s infrastructure.

​
Images configuration

The adapter extracts and converts image configuration from your Next.js config: 
const vercelConfig: VercelConfig = {
  version: 3,
  overrides: {},
  wildcard: i18nConfig?.domains ? [...] : undefined,
  images: getImagesConfig(config),
};
Location: index.ts:51-66

​
Configuration conversion

The getImagesConfig function converts Next.js image config to Vercel format:
1

Remote patterns

Remote patterns are converted with regex for hostname and pathname matching:
const remotePatterns = (images.remotePatterns || []).map((p) => ({
  protocol: p.protocol?.replace(/:$/, '') as 'http' | 'https' | undefined,
  hostname: makeRe(p.hostname).source,
  port: p.port,
  pathname: makeRe(p.pathname ?? '**', { dot: true }).source,
  search: p.search,
}));
Location: utils.ts:7-13
2

Local patterns

Local patterns for restricting local image paths:
const localPatterns = images.localPatterns?.map((p) => ({
  pathname: makeRe(p.pathname ?? '**', { dot: true }).source,
  search: p.search,
}));
Location: utils.ts:15-18
3

Sizes and formats

Device sizes and image sizes are combined:
return {
  localPatterns,
  remotePatterns,
  sizes: [...(images.imageSizes || []), ...(images.deviceSizes || [])],
  domains: images.domains || [],
  qualities: images.qualities,
  minimumCacheTTL: images.minimumCacheTTL,
  formats: images.formats,
  dangerouslyAllowSVG: images.dangerouslyAllowSVG,
  contentSecurityPolicy: images.contentSecurityPolicy,
  contentDispositionType: images.contentDispositionType,
};
Location: utils.ts:20-32

​
Images config type

The full image configuration type: 
export type ImagesConfig = {
  sizes: number[];
  domains: string[];
  remotePatterns?: RemotePattern[];
  localPatterns?: LocalPattern[];
  qualities?: number[];
  minimumCacheTTL?: number; // seconds
  formats?: ImageFormat[];
  dangerouslyAllowSVG?: boolean;
  contentSecurityPolicy?: string;
  contentDispositionType?: string;
};

type ImageFormat = 'image/avif' | 'image/webp';

type RemotePattern = {
  protocol?: 'http' | 'https';
  hostname: string;
  port?: string;
  pathname?: string;
  search?: string;
};

type LocalPattern = {
  pathname?: string;
  search?: string;
};
Location: types.ts:1-29

​
Pattern matching with picomatch

The adapter uses picomatch for glob pattern matching: 
import { makeRe } from 'picomatch';

const remotePatterns = (images.remotePatterns || []).map((p) => ({
  protocol: p.protocol?.replace(/:$/, '') as 'http' | 'https' | undefined,
  hostname: makeRe(p.hostname).source,
  port: p.port,
  pathname: makeRe(p.pathname ?? '**', { dot: true }).source,
  search: p.search,
}));
Location: utils.ts:2-13
Glob patterns are converted to regular expressions for efficient matching during image optimization requests.

​
Remote patterns

Remote patterns allow images from specific domains: 
type RemotePattern = {
  protocol?: 'http' | 'https';
  hostname: string;
  port?: string;
  pathname?: string;
  search?: string;
};

​
Hostname patterns

Hostnames support glob patterns:
  • example.com - Exact match
  • *.example.com - Single subdomain
  • **.example.com - Any subdomain depth

​
Pathname patterns

Pathnames use glob syntax:
  • /images/** - All paths under /images/
  • /images/*.jpg - Only .jpg files in /images/
  • ** - Match any path (default)
The dot: true option ensures dotfiles are matched: 
pathname: makeRe(p.pathname ?? '**', { dot: true }).source
Location: utils.ts:11

​
Local patterns

Local patterns restrict which local images can be optimized: 
const localPatterns = images.localPatterns?.map((p) => ({
  pathname: makeRe(p.pathname ?? '**', { dot: true }).source,
  search: p.search,
}));
Location: utils.ts:15-18
If not specified, all local images in the public directory are allowed.

​
Device and image sizes

The adapter combines both size arrays: 
sizes: [...(images.imageSizes || []), ...(images.deviceSizes || [])]
Location: utils.ts:23

​
Default sizes

Next.js default sizes:
  • imageSizes: [16, 32, 48, 64, 96, 128, 256, 384]
  • deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840]

​
Quality configuration

Custom quality levels for different image formats: 
qualities: images.qualities
Location: utils.ts:25
Qualities is an array of numbers (1-100) that Next.js will use for image optimization.

​
Cache TTL

Minimum cache time-to-live in seconds: 
minimumCacheTTL: images.minimumCacheTTL
Location: utils.ts:26 Default is 60 seconds. Optimized images are cached for at least this duration.

​
Image formats

Supported output formats: 
formats: images.formats

type ImageFormat = 'image/avif' | 'image/webp';
Location: utils.ts:27 and types.ts:3
Next.js automatically serves the best format supported by the client browser.

​
SVG handling

SVG images require explicit opt-in: 
dangerouslyAllowSVG: images.dangerouslyAllowSVG,
contentSecurityPolicy: images.contentSecurityPolicy,
Location: utils.ts:28-29
SVGs can contain executable code. Use contentSecurityPolicy to prevent XSS when enabling SVG optimization.
contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;"
This prevents script execution in optimized SVG images.

​
Content disposition

Control how images are served: 
contentDispositionType: images.contentDispositionType
Location: utils.ts:30 Options:
  • inline (default) - Display in browser
  • attachment - Force download

​
Allowed domains (legacy)

Legacy domain allowlist: 
domains: images.domains || []
Location: utils.ts:24
The domains config is legacy. Use remotePatterns for more precise control over allowed image sources.

​
basePath integration

Image optimization respects the basePath setting: 
...(config.basePath
  ? [
      {
        src: path.posix.join('/', config.basePath, '_next/image/?'),
        dest: '/_next/image',
        check: true,
      },
    ]
  : [])
Location: index.ts:604-612 This ensures /_next/image requests are rewritten correctly when using a custom base path.

Build docs developers (and LLMs) love

Get started for freeTalk to us