Comparison of major features in SvelteKit vs NextJS.
Goals: fast, easy, convention over configuration, & batteries included. Overwhelming choices are bad versus providing a clear path forward.
| SvelteKit | NextJS | Winner | Notes | |
|---|---|---|---|---|
| UI lib | Svelte | React (or Preact) | SvelteKit | Svelte offers faster, more minimal DOM updates & smaller KB client size. |
| Dev: Hot reload | 🟢 | 🟢 | -- | I.e. Auto reload on file save. |
| Dev: O(1) hot reload | 🟢 Vite | 🟢 🚧 Turbopack (*not enabled by default) | SvelteKit | I.e. Processes only the changed files. Fast even in big projects. *Update package.json to enable Turbopack: "dev": "next dev --turbo". |
| Dev: "Fast refresh" | 🟢 🚧 (not enabled by default) | 🟢 | NextJS | I.e. UI state preserved across reloads. |
| Dev: Write modern JS | 🟢 | 🟢 | -- | |
| Dev: A11y console hints | 🟢 | ❌ | SvelteKit | |
| Dev: Prettier | 🟢 | 🟢 | -- | For .svelte or .jsx files, respectively. For SvelteKit, install Svelte for VSCode extension. |
| Prod: Bundler | 🟢 | 🟢 | -- | E.g. Minify assets, etc. Both are enabled by default. |
| Prod: Auto code splitting, per route | 🟢 | 🟢 | -- | I.e. Auto code split JS & CSS per route & bundle appropriately. |
| Prod: Build adapters for different hosts | 🟢 | ❌ | SvelteKit | SvelteKit provides easy portability. NextJS works best with Vercel. |
| KB size: Hello World | 🟢 34.21 (16.2 gzip)* | ❌ 265.9 (91.59 gzip)* | SvelteKit | Out of date; PR welcome. *June 11, 2022. With Svelte Kit, it is possible to exclude all JS from a route, meaning that its minimal KB size would be an HTML file containing Hello World; so the listed KB is the default configuration with client-side router, et al, that most apps will use. |
| KB size: "Real World" app | too out of date | too out of date | -- | Out of date; PR welcome. *Mar 13, 2021 https://realworld.svelte.dev/, https://svelte.dev/blog/sapper-towards-the-ideal-web-app-framework |
| Rendering: SSR, per route | 🟢 | 🟢 | -- | I.e. Server-side rendered at run time. |
| Rendering: Streaming | 🟢 | 🟢 | -- | I.e. Server sends HTTP stream as it rendered on the server, rather than waiting for full rendering to complete before sending response. |
| Rendering: Static, per route | 🟢 | 🟢 | -- | I.e. Static HTML generated at build time. |
| Rendering: Incremental Static Regeneration, per route | 🟢 on non-edge Vercel | 🟢 on non-edge Vercel | -- | Static 'on demand' in production–i.e. first reqquest dynamic, then cached as static. For other runtimes (like Edge on Vercel & Cloudflare), consider setting your route's cache-control header to use stale-while-revalidate for some similar benefits. |
| Headers: s-max-age & max-age, per route | 🟢 | 🟢 | -- | |
| Routes: File-based routing | 🟢 | 🟢 | -- | For simplicity. Other routing utilities should be included. |
| Routes: "SPA mode" | 🟢 | 🟢 | -- | SSR for initial page load, then client-side routing for subsequent pages. |
| Routes: Pre-fetch JS/CSS on link hover | 🟢 | 🟢 next/link | SvelteKit | By default in SvelteKit, can be overridden or removed. Svelte also offers a preloadCode() and prefetchData() to preload all or some routes specified via regex--powerful! NextJS' requires using their link component; see docs. |
| Built-in: Metadata | 🟢 | 🟢 next/head | -- | Place within <svelte:head>...</svelte:head> |
| Built-in: CSS scoping | 🟢 | 🟢 | SvelteKit | Svelte's is automatic. NextJS' is via CSS modules or CSS in JSX (not as clean). |
| Built-in: State management | 🟢 svelte/store | ❌ | SvelteKit | Ideal is one, easy, built-in way. React has many choices–Zustand is reasonable. |
| Built-in: Animations | 🟢 svelte/animate | ❌ | SvelteKit | 3rd-party options exist for React, but they're not as easy to use. |
| Built-in: Forms | 🟢 Form actions & use:enhance (works with or without JS) |
❌ | SvelteKit | Svelte has built-in form support with progressive enhancement that work even without JS; they are very clean because validation rules are defined once and used for both client & server side. Formik (for React) is clean but requires JS and duplication of validation rules on the server side; similar to Felte (for React, SvelteKit, & Vue). |
| Built-in: Image component | ❌ Issue for official support (PR 🎉) - using vite-imagetools - svgimg |
🟢 next/image | NextJS | Convert images to desired sizes and optimized file types (avif or webp). Hosted services exist as well. vite-imagetools is another choice for SvelteKit, but svgimg makes it easier. |
| Auth | 🟢 Auth.js | 🟢 Auth.js | -- | NextAuth.js is defacto standard for NextJS; easy to use; email, social, &/or one-click link. It's renaming as Auth.js and supports SvelteKit too. Original announcement. |
| OG Image Generation | 🟢 @ethercorps/sveltekit-og | 🟢 @vercel/og | NextJS | @ethercorps/sveltekit-og is based on Satori, which @vercel/og is also based on. Credit to Vercel for creating Satori. Both include TailwindCSS support. |
| SWR-like data fetching | 🟢 SSWR 🟢 TanStack Query |
🟢 SWR 🟢 TanStack Query |
-- | Easy fetch/isLoading/errors/caching. |
| Tailwind CSS compatible | 🟢 (or via svelte-add) | 🟢 | -- | Easy via github.com/svelte-add/tailwindcss. NextJS requires more steps, but RFC for npx init tailwind |
| UI Component Libs - Styled | - 🟢🚧 shadcn-svelte (unofficial) | - 🟢 Shadcn UI - 🟢 Tailwind UI |
NextJS | - React/NextJS takes this one by a wide margin for now. - TODO: PRs welcome to add more libs. |
| UI Component Libs - Unstyled | - 🚧 Melt UI* - 🟢🚧 svelte-headlessui (unofficial; issues for official support: 1, 2) |
- 🟢 Headless UI - 🟢 Radix UI |
NextJS | Un-styled UI components (dropdown, slider, toggle, etc). *Melt UI is the successor to radix-svelte; shadcn-svelte will be built on top of Melt UI. |
| Tailwind CSS Component Libs (i.e. no JS) | - 🟢 DaisyUI -🟢❌ Headless UI* |
🟢 DaisyUI | -- | - DaisyUI offers themes that can be one-off customized with TailwindCSS classes or altered using Tailwind's @apply directive. CSS-only components require the dev to add accessible interactions with JS–a lot of work.- Headless UI is a paid product with official React and Vue support; can use as HTML & CSS with SvelteKit, but no JS. - TODO: PRs welcome to add more libs. |
| Docs | 10/10 | 10/10 | -- | |
| Module Directory | sveltesociety.dev/components | -- |
The following are low priority framework features because they can be enabled easily via hosting providers or other common tools (e.g. analytics).
| Svelte Kit | NextJS | Winner | Notes | |
|---|---|---|---|---|
| Prod: HTTP Early Hints response of JS/CSS** | ❌ | ❌ | Neither | **Not super relevant as a framework feature anymore because easily enabled via some hosting platform providers. Replaces HTTP2 Server Push. Send two responses: 1.) a 103 response status with headers listing resources to preload & preconnect; 2.) a standard 200 response status or similar. (Cloudflare can do this for sites automatically.) |
| Web vitals reporting** | ❌ | 🟢 | NextJS | **Not super relevant as a framework feature anymore because easily added via analytics snippet now or via some hosting platform providers. Cloudlfare Site Analytics offers Core Web Vitals tracking with zero configuration; it's part of their JS snippet. Vercel also offers it if using NextJS or NuxtJS & has a superb dashboard. |