SvelteKitからの移行

SvelteKitは、Svelteの上に構築されたWebアプリケーション開発フレームワークです。

SvelteKitとAstroの主な共通点

SvelteKitとAstroには、プロジェクト移行を容易にするいくつかの共通点があります。

SvelteKitとAstroはどちらも、最新のJavaScriptによる静的サイトジェネレーター兼サーバーサイドレンダリングフレームワークです。
両者ともに、src/フォルダを使用し、ファイルベースルーティングのための特別なフォルダを持っています。ページの作成・管理方法は類似しています。
AstroはSvelteコンポーネントの公式インテグレーション (EN)を備え、Svelte用のNPMパッケージをインストールして使用できます。既存のSvelte UIコンポーネントや依存関係をそのまま使える可能性があります。
SvelteKitとAstroはどちらもHeadless CMS、API、Markdownファイルを使ったデータ取得に対応しており、既存のコンテンツ執筆システムを継続利用できます。

SvelteKitとAstroの主な相違点

SvelteKitサイトをAstroで再構築する際、以下のような違いに気付くでしょう：

Astroはマルチページアプリ（MPA）をデフォルトとする一方、SvelteKitはSPAs（シングルページアプリケーション）を基本としつつ、MPAやSSRも組み合わせて構築できます。
コンポーネント：SvelteKitはSvelteコンポーネントを使用しますが、Astroでは.astroコンポーネントでページを構築します。また、React, Preact, Vue, Svelte, Solid, AlpineJSといった他のUIフレームワークのコンポーネントも利用できます。
コンテンツ駆動：Astroはコンテンツを中心に設計されており、インタラクティブ性は必要に応じて段階的に導入できます。SvelteKitアプリがクライアントサイドでの高いインタラクティブ性を前提としている場合、Astroで同等の表現には多少の工夫が必要です。
Markdown対応：AstroはMarkdownを標準でサポートしており、layoutプロパティを持つフロントマターでページテンプレートを定義できます。SvelteKitベースのMarkdownブログを移行する場合、専用のMarkdown統合を別途追加する必要はなく、既存のMarkdownファイルを再利用できます。ただし、Astroでは各ルートに対して専用のフォルダを必要としないため、構造の再整理が必要な場合があります。

SvelteKitブログをAstroに変換する

SvelteKitブログをAstroに変換するには、公式のブログテーマスターターを使用するか、コミュニティ製のブログテーマを探して開始できます。

create astroコマンドに--template引数を指定すると、公式スターターを使ってAstroプロジェクトを開始できます。また、既存のAstroリポジトリからプロジェクトを作成することも可能です。

npm create astro@latest -- --template blog

pnpm create astro@latest --template blog

yarn create astro --template blog

既存のMarkdownファイル（または任意でMDX）を、AstroのMarkdown/MDXページとして取り込むことができます。

Astroでもファイルベースルーティングやレイアウトコンポーネントの概念はありますが、Astroのプロジェクト構造を事前に確認しておくと、ファイル配置の理解に役立ちます。

ポートフォリオやドキュメントなど、他の種類のサイトを移行したい場合は、astro.newで公式スターターテンプレートを参照してください。GitHubリポジトリのリンクや、IDX・StackBlitz・CodeSandbox・Gitpodといったクラウド開発環境で即座に開けるワンクリックリンクも用意されています。