CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-sveltejs--adapter-vercel

A SvelteKit adapter that creates a Vercel app

Pending
Overview
Eval results
Files

configuration.mddocs/

Adapter Configuration

Configuration options for the SvelteKit Vercel adapter, including serverless functions, edge functions, and image optimization settings.

Capabilities

Main Configuration Type

Union type combining serverless and edge configuration options with image optimization.

type Config = (EdgeConfig | ServerlessConfig) & {
  /**
   * Image optimization configuration for Vercel's image service
   * https://vercel.com/docs/build-output-api/v3/configuration#images
   */
  images?: ImagesConfig;
};

Serverless Configuration

Configuration options for deploying to Vercel's serverless functions runtime.

interface ServerlessConfig {
  /**
   * Node.js runtime version for serverless functions
   * @deprecated Use the build environment's Node.js version instead
   * @default Same as the build environment
   */
  runtime?: `nodejs${number}.x`;
  
  /**
   * Vercel regions where the function should be deployed
   * More info: https://vercel.com/docs/concepts/edge-network/regions
   */
  regions?: string[];
  
  /**
   * Maximum execution duration in seconds for the serverless function
   * Serverless only
   */
  maxDuration?: number;
  
  /**
   * Amount of memory (RAM in MB) allocated to the serverless function  
   * Serverless only
   */
  memory?: number;
  
  /**
   * If true, this route will always be deployed as its own separate function
   */
  split?: boolean;
  
  /**
   * Incremental Static Regeneration configuration
   * Serverless only
   * https://vercel.com/docs/concepts/incremental-static-regeneration/overview
   */
  isr?: {
    /**
     * Expiration time (in seconds) before cached asset will be re-generated
     * Setting to false means it will never expire
     */
    expiration: number | false;
    
    /**
     * Random token for bypassing cached version via __prerender_bypass=<token> cookie
     * GET/HEAD requests with x-prerender-revalidate: <token> header force re-validation
     */
    bypassToken?: string;
    
    /**
     * Query string parameter names cached independently
     * Empty array ignores query values, undefined caches each unique query independently
     * Note: '__pathname' is a reserved parameter and cannot be included
     */
    allowQuery?: string[] | undefined;
  } | false;
}

Usage Examples:

// Basic serverless configuration
adapter({
  runtime: "nodejs20.x",
  regions: ["iad1", "sfo1"],
  memory: 512,
  maxDuration: 30
});

// ISR configuration
adapter({
  runtime: "nodejs20.x", 
  isr: {
    expiration: 300, // 5 minutes
    bypassToken: "secret-bypass-token",
    allowQuery: ["page", "sort"]
  }
});

// Split functions for different routes
adapter({
  split: true,
  memory: 1024
});

ISR Validation and Restrictions

When using ISR configuration, the adapter performs validation to ensure proper functionality:

Reserved Parameters:

  • __pathname is automatically added to the allowQuery list and cannot be manually specified
  • Including __pathname in your allowQuery array will result in a validation error

Runtime Requirements:

  • ISR can only be used with Node.js runtimes (nodejs18.x, nodejs20.x, etc.)
  • Edge runtime (runtime: 'edge') does not support ISR functionality

Error Examples:

// ❌ This will throw an error
adapter({
  isr: {
    expiration: 300,
    allowQuery: ["page", "__pathname"] // Error: __pathname is reserved
  }
});

// ❌ This will throw an error  
adapter({
  runtime: "edge", // Error: Edge runtime doesn't support ISR
  isr: {
    expiration: 300
  }
});

Edge Configuration (Deprecated)

⚠️ DEPRECATED: Edge runtime configuration is deprecated and will be removed in a future version of adapter-vercel. Use serverless configuration instead.

Configuration options for deploying to Vercel's edge functions runtime.

/**
 * @deprecated Edge runtime configuration is deprecated
 * Will be removed in a future version of adapter-vercel
 */
interface EdgeConfig {
  /**
   * Edge functions runtime identifier
   */
  runtime?: 'edge';
  
  /**
   * Deployment regions - array of region codes or 'all' for global deployment
   * More info: https://vercel.com/docs/concepts/edge-network/regions
   */
  regions?: string[] | 'all';
  
  /**
   * List of packages that should not be bundled into the Edge Function
   * Edge only
   */
  external?: string[];
  
  /**
   * If true, this route will always be deployed as its own separate function
   */
  split?: boolean;
}

Usage Examples:

// Edge function configuration (DEPRECATED - use serverless instead)
adapter({
  runtime: "edge", // ⚠️ DEPRECATED
  regions: ["iad1", "fra1"],
  external: ["some-package"]
});

// Recommended alternative - use serverless configuration:
adapter({
  runtime: "nodejs20.x", // ✅ RECOMMENDED
  regions: ["iad1", "fra1"]
});

Image Configuration

Settings for Vercel's built-in image optimization service.

interface ImagesConfig {
  /**
   * Array of width values for responsive image generation
   */
  sizes: number[];
  
  /**
   * Array of allowed domain names for external images
   */
  domains: string[];
  
  /**
   * Array of remote pattern objects for more flexible external image matching
   */
  remotePatterns?: RemotePattern[];
  
  /**
   * Minimum Cache-Control max-age in seconds for optimized images
   */
  minimumCacheTTL?: number;
  
  /**
   * Array of allowed output image formats
   */
  formats?: ImageFormat[];
  
  /**
   * Allow potentially unsafe SVG images
   */
  dangerouslyAllowSVG?: boolean;
  
  /**
   * Content Security Policy for SVG images when dangerouslyAllowSVG is true
   */
  contentSecurityPolicy?: string;
  
  /**
   * Content-Disposition header type for image responses
   */
  contentDispositionType?: string;
}

interface RemotePattern {
  /**
   * Protocol for remote image URLs
   */
  protocol?: 'http' | 'https';
  
  /**
   * Hostname for remote image URLs (required)
   */
  hostname: string;
  
  /**
   * Port for remote image URLs
   */
  port?: string;
  
  /**
   * Pathname pattern for remote image URLs
   */
  pathname?: string;
}

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

Usage Examples:

// Image optimization configuration
adapter({
  images: {
    sizes: [320, 640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    domains: ["example.com", "images.example.com"],
    remotePatterns: [
      {
        protocol: "https",
        hostname: "**.amazonaws.com",
        pathname: "/uploads/**"
      }
    ],
    formats: ["image/avif", "image/webp"],
    minimumCacheTTL: 60
  }
});

RequestContext Interface

Context object available in edge functions for advanced functionality.

/**
 * Extension to the standard Request object passed to every Edge Function
 * Copy of @vercel/edge RequestContext to avoid package conflicts with @types/node
 */
interface RequestContext {
  /**
   * Method to keep the function running after a response has been sent
   * Useful for async tasks that should continue after the response
   */
  waitUntil(promise: Promise<unknown>): void;
}

Usage Examples:

// Edge function with context usage
export default async function handler(request: Request, ctx: RequestContext): Promise<Response> {
  try {
    const response = await processRequest(request);
    
    // Log analytics after response is sent
    ctx.waitUntil(
      fetch('https://analytics.example.com/log', {
        method: 'POST',
        body: JSON.stringify({ url: request.url, timestamp: Date.now() })
      })
    );
    
    return response;
  } catch (error) {
    // Report error to monitoring service
    ctx.waitUntil(
      reportError(error, request.url)
    );
    
    return new Response('Internal Server Error', { status: 500 });
  }
}

Global Platform Extension

The adapter extends SvelteKit's global App.Platform interface to provide Vercel-specific context.

declare global {
  namespace App {
    export interface Platform {
      /**
       * RequestContext is only available in Edge Functions
       * Provides access to waitUntil and other edge-specific functionality
       */
      context?: RequestContext;
    }
  }
}

Usage in SvelteKit:

// In a SvelteKit route or hook
export async function load({ platform }) {
  // Edge function context is available
  if (platform?.context) {
    platform.context.waitUntil(
      logRequest(request.url)
    );
  }
  
  return {
    // route data
  };
}

Install with Tessl CLI

npx tessl i tessl/npm-sveltejs--adapter-vercel

docs

configuration.md

index.md

utilities.md

tile.json