環境構築から、レイアウトとコンポーネント・コンテンツコレクション・アイランド・SEO と RSS、そして公開まで。全20レッスンで「文章が主役のサイトを、JavaScript を送らずに作れる」ところまで進みます。バージョン・ビルド出力・配信されるバイト数は、すべて Astro v7.3.4 で実際に測った値です。
全20レッスンを5つの章に分けています。第1章から順に進めるのがおすすめですが、 気になるところだけ拾い読みしてもかまいません。 ※ .astro ファイルはブラウザ内で実行できないため、第3回で作るプロジェクトで試してください。 HTML・JavaScript・TypeScript で示した部分は、そのままブラウザ上で動かせます。
MPA と SPA の違いを押さえ、同じ内容のページを Astro と Next.js でビルドして、配信される JavaScript のバイト数を実際に比べます。最後は .astro の構文とスコープ付きスタイルまで進みます。
レイアウト・コンポーネント・スロット・ルーティング・静的アセットという、ページを 1 枚仕上げるのに必要な部品をそろえます。最後は画像が WebP に変換されるところまで実測します。
Markdown で書いた記事をコレクションとして束ね、スキーマで型を付け、一覧ページと記事ページを生成します。最後は MDX で本文にコンポーネントを置けるところまで進みます。
アイランドアーキテクチャの考え方と、React や Svelte を島として埋め込む方法を扱います。client:load と client:visible で読み込まれるタイミングが変わることを、ネットワークの記録で確かめます。
canonical と OGP とサイトマップを整え、RSS を出し、ビルド出力を読んでから公開します。最後に、Astro と Next.js のどちらを選ぶかの基準をはっきりさせます。
全20レッスンを終えたら、次はログインとデータベースを扱う Next.js か、見た目を詰める モダン CSS & Tailwind へ。メンバーシップで全コースが解放されます。