How to Deploy a SvelteKit App to Vercel

Deploying a SvelteKit application to Vercel is one of the fastest paths from code to production URL. Vercel is the company behind both Next.js and the employment of Rich Harris (Svelte's creator), so SvelteKit support is first-class. This guide covers every step: installing the adapter, configuring your project, managing environment variables, deploying via the CLI and Git, setting up a custom domain, and optimizing performance. Whether you are deploying your first SvelteKit app or migrating from another hosting provider, this walkthrough has you covered. If you are building your SvelteKit app with Teta, deployment to Vercel is built into the editor — one click and your app is live.

Prerequisites

Before deploying, make sure you have:

• A working SvelteKit project (SvelteKit 2.x with Svelte 5 is the current recommended version)
• Node.js 18 or later installed
• A Vercel account (free tier is available at vercel.com)
• Git installed (if deploying via Git integration)
• The Vercel CLI installed (optional, for CLI deployments): npm install -g vercel

Your project should build successfully locally. Run npm run build and fix any errors before attempting deployment. This saves you from debugging build issues in a remote environment.

Verify your project structure looks correct:

your-project/
  src/
    routes/
      +page.svelte
      +layout.svelte
    app.html
  static/
  svelte.config.js
  vite.config.ts
  package.json

Installing the Vercel Adapter

SvelteKit uses adapters to target different deployment platforms. The Vercel adapter transforms your SvelteKit build output into a format that Vercel's infrastructure understands — serverless functions for dynamic routes, edge functions where specified, and static files for prerendered pages.

Install the adapter as a development dependency:

npm install -D @sveltejs/adapter-vercel

This is the official adapter maintained by the SvelteKit team. It is the only adapter you need for Vercel deployment — do not install the generic adapter-node or adapter-auto if you are targeting Vercel specifically.

Configuring svelte.config.js

Open your svelte.config.js and replace the existing adapter with the Vercel adapter:

import adapter from '@sveltejs/adapter-vercel';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: vitePreprocess(),
  kit: {
    adapter: adapter({
      // Options (all optional)
      runtime: 'nodejs22.x',   // Node.js version
    })
  }
};

export default config;

Adapter Options

The Vercel adapter accepts several configuration options:

runtime — Specifies the Node.js version for serverless functions. Use 'nodejs22.x' for the latest LTS or 'nodejs20.x' for broader compatibility. Defaults to the latest supported version.

regions — An array of Vercel regions where your serverless functions should run. Example: ['iad1'] for US East. By default, functions deploy to all regions.

split — When true, creates a separate serverless function for each route. When false (default), bundles all routes into a single function. Splitting can improve cold start times for large apps but increases the total number of functions.

isr — Configure Incremental Static Regeneration. Example:

adapter({
  isr: {
    expiration: 60 // Revalidate every 60 seconds
  }
})

For most projects, the defaults work well. You can start with no options and add configuration as needed.

Per-Route Configuration

SvelteKit lets you configure individual routes with a +page.server.ts or +layout.server.ts file:

// src/routes/api/heavy-computation/+server.ts
export const config = {
  runtime: 'nodejs22.x',
  regions: ['iad1'],
  maxDuration: 30  // seconds
};

This is useful when specific routes need different runtime characteristics — for example, an API route that processes images might need a longer timeout than your pages.

Environment Variables

SvelteKit on Vercel uses two types of environment variables:

Public Variables (Available in the Browser)

Variables prefixed with PUBLIC_ are exposed to client-side code:

PUBLIC_SUPABASE_URL=https://your-project.supabase.co
PUBLIC_SUPABASE_ANON_KEY=eyJhb...
PUBLIC_APP_NAME=My SvelteKit App

Access them in your code with $env/static/public:

import { PUBLIC_SUPABASE_URL } from '$env/static/public';

Private Variables (Server Only)

Variables without the PUBLIC_ prefix are only available in server-side code (load functions, form actions, API routes, hooks):

DATABASE_URL=postgresql://...
STRIPE_SECRET_KEY=sk_live_...
JWT_SECRET=your-secret-here

Access them with $env/static/private:

import { DATABASE_URL } from '$env/static/private';

Setting Variables in Vercel

You can set environment variables in three ways:

Vercel Dashboard: Go to your project → Settings → Environment Variables. Add each variable with its value and select which environments it applies to (Production, Preview, Development).

Vercel CLI:

vercel env add DATABASE_URL

The CLI will prompt for the value and which environments to apply it to.

.env file (local development only): Create a .env file in your project root for local development. Add .env to your .gitignore — never commit secrets to version control.

# .env (local development)
DATABASE_URL=postgresql://localhost:5432/mydb
PUBLIC_SUPABASE_URL=https://your-project.supabase.co

SvelteKit's environment variable system validates at build time. If your code references $env/static/private/DATABASE_URL but the variable is not set during build, you get a clear error rather than a silent runtime failure.

Deploying Your SvelteKit App

Method 1: Git Integration (Recommended)

This is the most common deployment approach. Every push to your repository triggers an automatic deployment.

1. Push your project to GitHub, GitLab, or Bitbucket.

2. Go to vercel.com/new and import your repository.

3. Vercel auto-detects SvelteKit and configures the build settings:

   • Framework Preset: SvelteKit
   • Build Command: npm run build (or vite build)
   • Output Directory: .vercel/output

4. Add your environment variables if needed.

5. Click Deploy.

Your app will be live in 1-2 minutes at a your-project.vercel.app URL.

From now on, every push to your main branch creates a production deployment. Pushes to other branches create preview deployments with unique URLs — perfect for testing changes before merging.

Method 2: Vercel CLI

For manual deployments or when you want more control:

# Deploy to preview
npx vercel

# Deploy to production
npx vercel --prod

The CLI will prompt you to link the project to your Vercel account on the first run. After linking, deployments take about a minute.

This method is useful for deploying from CI/CD pipelines, testing deployment without pushing to Git, or when your project is not in a Git repository.

Method 3: One-Click from Teta

If you are building your SvelteKit app in Teta, deployment is integrated into the editor. Click the deploy button, connect your Vercel account, and your app goes live. Environment variables and build configuration are handled automatically. This is the fastest path from idea to deployed URL.

Custom Domains

After deploying, you will want a real domain instead of your-project.vercel.app.

Adding a Custom Domain

1. Go to your project in the Vercel dashboard.
2. Navigate to Settings → Domains.
3. Enter your domain (e.g., myapp.com) and click Add.
4. Vercel provides DNS configuration instructions.

DNS Configuration

For a root domain (myapp.com), add an A record pointing to Vercel's IP:

Type: A
Name: @
Value: 76.76.21.21

For a subdomain (app.myapp.com), add a CNAME record:

Type: CNAME
Name: app
Value: cname.vercel-dns.com

DNS propagation typically takes a few minutes to a few hours. Vercel automatically provisions an SSL certificate once DNS is verified — no manual certificate setup required.

WWW Redirects

Vercel handles www → non-www (or vice versa) redirects automatically. Add both myapp.com and www.myapp.com as domains, and Vercel will configure the redirect.

Performance Optimizations

SvelteKit on Vercel is fast by default, but there are several optimizations worth configuring:

Prerendering Static Pages

Pages that do not change per-request should be prerendered at build time. Add this to any static page's load function:

// src/routes/about/+page.ts
export const prerender = true;

Or prerender your entire site if it is mostly static:

// src/routes/+layout.ts
export const prerender = true;

Prerendered pages are served directly from Vercel's CDN with no serverless function invocation — the fastest possible response time.

Edge Functions

For dynamic pages that need to be fast globally, you can run them at the edge (closer to users):

// src/routes/api/geo/+server.ts
export const config = {
  runtime: 'edge'
};

export function GET({ request }) {
  const country = request.headers.get('x-vercel-ip-country');
  return new Response(JSON.stringify({ country }));
}

Edge functions start in milliseconds (no cold start) and run in data centers near your users. They have limitations — no Node.js file system, limited npm package compatibility — but for lightweight dynamic responses, they are excellent.

Image Optimization

If your app serves images, use the @vercel/og package for dynamic Open Graph images or configure Vercel's image optimization:

<!-- Use width and height attributes for proper layout shift prevention -->
<img
  src="/hero.webp"
  alt="App screenshot"
  width="1200"
  height="630"
  loading="lazy"
  decoding="async"
/>

Use modern formats like WebP or AVIF, set explicit dimensions to prevent layout shifts, and use loading="lazy" for images below the fold.

Caching Headers

For API routes that return data that does not change frequently, set cache headers:

// src/routes/api/posts/+server.ts
export function GET() {
  const posts = getPosts();
  return new Response(JSON.stringify(posts), {
    headers: {
      'Content-Type': 'application/json',
      'Cache-Control': 's-maxage=60, stale-while-revalidate=300'
    }
  });
}

s-maxage=60 tells Vercel's CDN to cache the response for 60 seconds. stale-while-revalidate=300 serves stale content while fetching a fresh version in the background for up to 5 minutes.

Monitoring Your Deployment

Once your app is live, Vercel provides several monitoring tools:

Analytics — Enable Vercel Analytics in the dashboard to track Core Web Vitals (LCP, FID, CLS) from real users. This data comes from actual browser measurements, not synthetic tests.

Logs — View serverless function logs in the dashboard under Logs. Filter by route, status code, or time range. Useful for debugging server-side errors.

Speed Insights — Vercel Speed Insights shows performance metrics per route, helping you identify which pages need optimization.

Alerts — Configure alerts for error rate spikes, slow function execution, or usage threshold warnings.

For application-level error tracking, consider integrating Sentry or a similar service. Add the Sentry SvelteKit SDK:

npx @sentry/wizard@latest -i sveltekit

This wraps your server hooks and client-side code with error boundaries, automatically capturing and reporting exceptions.

FAQ

Is Vercel free for SvelteKit?

Yes, Vercel has a generous free tier called Hobby that supports SvelteKit projects with serverless functions, edge functions, and automatic deployments from Git. The free tier includes 100 GB of bandwidth, 100 hours of serverless function execution, and automatic SSL. Paid plans (Pro at $20/month) unlock team features, higher limits, and priority support.

How do I add environment variables to my SvelteKit Vercel deployment?

Add environment variables in the Vercel dashboard under Project Settings then Environment Variables. For variables that need to be accessible in client-side code, prefix them with PUBLIC_. For server-only secrets (API keys, database URLs), use no prefix. You can also use the Vercel CLI with vercel env add VARIABLE_NAME.

Can I use a custom domain with SvelteKit on Vercel?

Yes. Add your domain in the Vercel dashboard under Project Settings then Domains. Vercel provides the DNS records you need to configure at your domain registrar (an A record for root domains, a CNAME for subdomains). SSL certificates are provisioned automatically at no extra cost, and www redirects are handled for you.

How fast is SvelteKit on Vercel?

SvelteKit on Vercel is very fast. Prerendered pages are served directly from the CDN with response times typically under 50ms globally. Server-rendered pages using serverless functions respond in 50-200ms depending on the region and complexity. Edge functions respond in under 50ms worldwide. SvelteKit's small bundle sizes also mean fast client-side loading — a typical page loads 30-50% less JavaScript than an equivalent Next.js page.

What about server-side rendering on Vercel?

SvelteKit's SSR works seamlessly on Vercel. Dynamic pages are rendered by serverless functions on each request, giving you fresh data and good SEO. You can mix SSR and prerendering in the same app — prerender static pages like your landing page and about page while using SSR for dynamic pages like dashboards and user profiles. Vercel's infrastructure handles the routing between static files and serverless functions automatically.