A SvelteKit adapter that creates a Vercel app
—
Configuration options for the SvelteKit Vercel adapter, including serverless functions, edge functions, and image optimization settings.
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;
};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
});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__pathname in your allowQuery array will result in a validation errorRuntime Requirements:
nodejs18.x, nodejs20.x, etc.)runtime: 'edge') does not support ISR functionalityError 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
}
});⚠️ 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"]
});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
}
});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 });
}
}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