getStaticPaths で動的ルーティングを理解する

ファイル名がそのままURLになる

Astro は src/pages/ 配下のファイル構成がそのままルーティングになります。 角カッコを使ったファイル名は 動的ルート を表します。

ファイル	URL
src/pages/blog/[...slug].astro	/blog/任意のスラッグ
src/pages/tags/[tag].astro	/tags/任意のタグ

getStaticPaths でページを列挙する

静的サイト生成では、どんなURLを作るかをビルド時に教える必要があります。

export async function getStaticPaths() {
  const posts = await getCollection("blog");
  return posts.map((post) => ({
    params: { slug: post.id },
    props: { post },
  }));
}

params がURLに、props がページ側で受け取るデータになります。 これで記事を1つ追加するだけで、対応するページが自動的に増えます。