Migrating from SvelteKit

このコンテンツはまだ日本語訳がありません。

SvelteKit is a framework for building web applications on top of Svelte.

Key Similarities between SvelteKit and Astro

SvelteKit and Astro share some similarities that will help you migrate your project:

Both SvelteKit and Astro are modern JavaScript static-site generators and server-side rendering frameworks.
Both SvelteKit and Astro use a src/ folder for your project files and a special folder for file-based routing. Creating and managing pages for your site should feel familiar.
Astro has an official integration for using Svelte components and supports installing NPM packages, including several for Svelte. You will be able to write Svelte UI components, and may be able to keep some or all of your existing components and dependencies.
Astro and SvelteKit both allow you to use a headless CMS, APIs or Markdown files for data. You can continue to use your preferred content authoring system, and will be able to keep your existing content.

Key Differences between SvelteKit and Astro

When you rebuild your SvelteKit site in Astro, you will notice some important differences:

Astro sites are multi-page apps, whereas SvelteKit defaults to SPAs (single-page applications) with server-side rendering, but can also create MPAs, traditional SPAs, or you can mix and match these techniques within an app.
Components: SvelteKit uses Svelte. Astro pages are built using .astro components, but can also support React, Preact, Vue.js, Svelte, SolidJS, AlpineJS and raw HTML templating.
content-driven: Astro was designed to showcase your content and to allow you to opt-in to interactivity only as needed. An existing SvelteKit app might be built for high client-side interactivity. Astro has built-in capabilities for working with your content, such as page generation, but may require advanced Astro techniques to include items that are more challenging to replicate using .astro components, such as dashboards.
Markdown-ready: Astro includes built-in Markdown support, and includes a special frontmatter YAML layout property used per-file for page templating. If you are converting a SvelteKit Markdown-based blog, you will not have to install a separate Markdown integration and you will not set a layout via a configuration file. You can bring your existing Markdown files, but you may need to reorganize as Astro’s file-based routing does not require a folder for each page route.

Switch from SvelteKit to Astro

To convert a SvelteKit blog to Astro, start with our blog theme starter template, or explore more community blog themes in our theme showcase.

You can pass a --template argument to the create astro command to start a new Astro project with one of our official starters. Or, you can start a new project from any existing Astro repository on GitHub.

npm create astro@latest -- --template blog

pnpm create astro@latest --template blog

yarn create astro --template blog

Bring your existing Markdown (or MDX, with our optional integration) files as content to create Markdown or MDX pages.

While file-based routing and layout components are similar in Astro, you may wish to read about Astro’s project structure to learn where files should be located.

To convert other types of sites, such as a portfolio or documentation site, see more official starter templates on astro.new. You’ll find a link to each project’s GitHub repository, as well as one-click links to open a working project in StackBlitz, CodeSandbox and Gitpod online development environments.