Astro.js で SSG サイトを作るときの Tips

Astro.js は、コンテンツ駆動型の Web サイトを構築するための優れたフレームワークです。

Content Collections

Astro の Content Collections を使うと、Markdown や MDX ファイルを型安全に管理できます。

import { defineCollection, z } from 'astro:content';

const posts = defineCollection({
  schema: z.object({
    title: z.string(),
    pubDate: z.date(),
  }),
});

Image 最適化

Astro の <Image> コンポーネントを使うと、画像が自動的に最適化されます。WebP への変換やサイズ調整が自動で行われます。

Islands Architecture

Astro のアイランドアーキテクチャにより、必要な部分だけにインタラクティブなコンポーネントを配置できます。