Beginner10 minutesUpdated 2026-03-01

SvelteKit is the official application framework for Svelte, offering server-side rendering, static prerendering, and API endpoints. With the @sveltejs/adapter-netlify, your SvelteKit app deploys seamlessly to Netlify with SSR powered by serverless functions and static pages served from the CDN.

Prerequisites

Node.js 18 or later installed
A SvelteKit project
A Netlify account
Git repository (GitHub, GitLab, or Bitbucket)

Step 1: Install the Netlify adapter

Replace the default adapter with @sveltejs/adapter-netlify.

npm install -D @sveltejs/adapter-netlify
npm uninstall @sveltejs/adapter-auto

Step 2: Configure the adapter

Update your svelte.config.js to use the Netlify adapter.

svelte.config.js

import adapter from '@sveltejs/adapter-netlify'

export default {
  kit: {
    adapter: adapter({
      edge: false,
      split: false,
    }),
  },
}

Set 'edge: true' to run your SvelteKit app on Netlify Edge Functions for lower latency. Set 'split: true' to create separate functions for each route.

Step 3: Push to Git and import in Netlify

Push your code and import the project in Netlify. It auto-detects SvelteKit and sets the correct build settings.

Build settings

Build command: vite build
Publish directory: build

Step 4: Add environment variables

SvelteKit makes environment variables available through $env/static/private and $env/dynamic/private modules. Add your variables in Netlify's dashboard. Public variables use the PUBLIC_ prefix.

PUBLIC_API_URL=https://api.example.com
DATABASE_URL=postgresql://...

Step 5: Deploy

Deploy your site. Prerendered pages go to the CDN, and dynamic routes run as Netlify Functions. SvelteKit's file-based routing maps cleanly to Netlify's infrastructure.

netlify.toml Configuration

SvelteKit outputs to a 'build' directory when using the Netlify adapter. The adapter handles routing between static and dynamic pages automatically.

netlify.toml

[build]
  command = "vite build"
  publish = "build"

Common Errors

Error: @sveltejs/adapter-netlify is not installed

Cause: The adapter is missing from your project or only installed as a regular dependency instead of a dev dependency.

Fix: Run 'npm install -D @sveltejs/adapter-netlify' and verify it appears in your devDependencies.

404 errors on dynamic routes

Cause: Dynamic routes need server-side rendering but the adapter configuration isn't correct.

Fix: Ensure your svelte.config.js uses adapter-netlify (not adapter-auto or adapter-static). Check that dynamic routes don't have 'export const prerender = true' unless they can be fully prerendered.

Function bundling failed

Cause: A server-side dependency can't be bundled by the adapter, often due to native modules.

Fix: Check if the problematic dependency has a browser-compatible alternative. If not, add it to the adapter's external option: adapter({ external: ['problematic-package'] }).

Pro Tips

Use SvelteKit's prerender option for pages that don't need dynamic data — they'll be served as static files from Netlify's CDN.

SvelteKit's form actions work seamlessly on Netlify. Forms progressively enhance from HTML to client-side JavaScript.

Use Netlify's deploy previews to test SvelteKit changes before merging. Each preview gets its own URL and functions.

Monitor your SvelteKit deployments with the Netli.fyi app — get notified when builds complete or fail.

Consider the 'split: true' option for large SvelteKit apps. It creates separate serverless functions per route, improving cold start times.

Deploy SvelteKit to Netlify