Skip to main content

Vercel

How to use Sveltekit OG with the vercel adapter (@sveltejs/adapter-vercel)

This section details the configuration needed to use SvelteKit OG with the Vercel Adapter (@sveltejs/adapter-vercel), targeting the Vercel Edge Runtime or Serverless Functions (Node).

Installation

First, ensure you have the Vercel adapter installed:

		pnpm i -D @sveltejs/adapter-vercel

In your svelte.config.js, configure the adapter:

svelte.config.js
		import adapter from '@sveltejs/adapter-vercel';
 
const config = {
	 ...,
    kit: {
        adapter: adapter()
    },
    ...
};
export default config;

Plugin Configuration

The image generation uses the @resvg/resvg-wasm, satori, yoga, which relies on a Wasm module. The official SvelteKit OG plugins handle the complex Wasm bundling required for the runtime. You must choose one of the following plugins based on your sveltekit-og version.

Vite Plugin (Recommended)

Add the sveltekitOG plugin to your vite.config.ts.

vite.config.ts
		import { sveltekit } from '@sveltejs/kit/vite';
import { sveltekitOG } from '@ethercorps/sveltekit-og/plugin';
import { defineConfig } from 'vite';
 
const config = defineConfig({
	plugins: [
		sveltekit(),
		sveltekitOG() // Add the Vite plugin
	]
});
 
export default config;

Rollup Plugin (Legacy)

Add the rollupWasm plugin inside the rollupOptions block in your vite.config.ts.

vite.config.ts
		import { sveltekit } from '@sveltejs/kit/vite';
import { rollupWasm } from '@ethercorps/sveltekit-og/plugin';
import { defineConfig } from 'vite';
 
const config = defineConfig({
	plugins: [sveltekit()],
	build: {
		rollupOptions: {
			// Add rollupWasm plugin for Cloudflare compatibility
			plugins: [rollupWasm()]
		}
	}
});
 
export default config;

Edge and Serverless Split

The SvelteKit Vercel adapter supports specifying the runtime on a per-route basis. This is highly recommended to isolate your computationally intensive OG image route into the smaller, faster Edge or Fluid Runtime, while keeping other APIs on the larger, more flexible Serverless (Node) runtime.

You can achieve this by adding a +server.ts configuration file alongside your OG image route.

Edge

This route runs on the Edge Runtime:

src/routes/og/+server.ts
		// 1. Specify the runtime for this route
export const config = {
	runtime: 'edge', // Use the Vercel Edge Runtime
	split: true // Recommended to ensure isolation
};
 
import { ImageResponse } from '@ethercorps/sveltekit-og';
import type { RequestHandler } from './$types';
 
export const GET: RequestHandler = async () => {
	// Your standard ImageResponse logic here
	return new ImageResponse(/* ... */);
};

Serverless (Node) Runtime

		// No 'config' export means it defaults to the Node Serverless Function. You can use split config here too.
import type { RequestHandler } from './$types';
import { ImageResponse } from '@ethercorps/sveltekit-og';
 
export const GET: RequestHandler = async () => {
	return new ImageResponse(/* ... */);
};

Usage

Once configured, the usage remains the same as any other SvelteKit environment.

Preview

Source: https://github.com/etherCorps/sveltekit-og/tree/main/examples/vercel-build
Live: https://vercel.sveltekit-og.dev/sc

Cloudflare

How to use Sveltekit OG with cloudflare adapter (@sveltejs/cloudflare-adapter)

Node JS

How to use Sveltekit OG with the node adapter (@sveltejs/adapter-node)