Skip to main content
The Vercel adapter integrates with Next.js configuration options to generate the appropriate deployment outputs. Understanding these options helps you optimize your Vercel deployments.

​
Adapter configuration

Configure the adapter in the experimental section of your Next.js config.
​
experimental.adapterPath
string
required
Path to the adapter package. Use require.resolve('@next-community/adapter-vercel') to automatically resolve the installed package path.
import { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    adapterPath: require.resolve('@next-community/adapter-vercel')
  }
}

export default nextConfig

​
Image optimization

The adapter automatically configures Vercel’s image optimization based on your Next.js image configuration.

​
Image sizes

​
images.imageSizes
number[]
Array of image widths for responsive images. Combined with deviceSizes to generate the full set of optimized image sizes.
​
images.deviceSizes
number[]
Array of device widths for responsive images. Combined with imageSizes to generate the full set of optimized image sizes.

​
Image domains and patterns

​
images.domains
string[]
Array of allowed external domains for image optimization. For more control, use remotePatterns instead.
​
images.remotePatterns
object[]
Array of remote URL patterns allowed for image optimization.Each pattern can specify:
  • protocol: 'http' or 'https' (optional)
  • hostname: Domain name (supports wildcards)
  • port: Port number (optional)
  • pathname: URL path pattern (optional)
  • search: Query string pattern (optional)
​
images.localPatterns
object[]
Array of local file patterns allowed for image optimization.Each pattern can specify:
  • pathname: File path pattern (optional)
  • search: Query string pattern (optional)

​
Image quality and formats

​
images.qualities
number[]
Array of quality values for image optimization. Values should be between 1 and 100.
​
images.formats
string[]
Array of supported image formats. Supported values: 'image/avif', 'image/webp'

​
Image caching and security

​
images.minimumCacheTTL
number
Minimum cache TTL in seconds for optimized images.
​
images.dangerouslyAllowSVG
boolean
Allow SVG images to be optimized. Use with caution as SVG files can contain scripts.
​
images.contentSecurityPolicy
string
Content Security Policy header for image responses.
​
images.contentDispositionType
string
Content-Disposition header type for image responses.

​
Example configuration

next.config.ts
import { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    adapterPath: require.resolve('@next-community/adapter-vercel')
  },
  images: {
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'images.example.com',
        pathname: '/uploads/**',
      },
    ],
    formats: ['image/avif', 'image/webp'],
    minimumCacheTTL: 60,
  },
}

export default nextConfig

​
Internationalization

The adapter supports Next.js i18n configuration and automatically generates locale-specific routes.
​
i18n.locales
string[]
Array of all supported locales.
​
i18n.defaultLocale
string
Default locale for the application.
​
i18n.domains
object[]
Array of domain-specific locale configurations.Each domain can specify:
  • domain: Domain name
  • defaultLocale: Default locale for this domain
  • locales: Supported locales for this domain (optional)
  • http: Use HTTP instead of HTTPS (optional)
​
i18n.localeDetection
boolean
Enable automatic locale detection based on Accept-Language header.

​
Example i18n configuration

next.config.ts
import { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    adapterPath: require.resolve('@next-community/adapter-vercel')
  },
  i18n: {
    locales: ['en', 'fr', 'de'],
    defaultLocale: 'en',
    domains: [
      {
        domain: 'example.com',
        defaultLocale: 'en',
      },
      {
        domain: 'example.fr',
        defaultLocale: 'fr',
      },
    ],
  },
}

export default nextConfig

​
Base path and trailing slash

​
basePath
string
Base path for the application. All routes will be prefixed with this path.
​
trailingSlash
boolean
Add trailing slashes to URLs.
next.config.ts
import { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    adapterPath: require.resolve('@next-community/adapter-vercel')
  },
  basePath: '/docs',
  trailingSlash: true,
}

export default nextConfig

Build docs developers (and LLMs) love

Get started for freeTalk to us