動的ルートで複数の詳細ページを作る

同じ形のページをデータで増やす

記事ごとに同じテンプレートを使う場合、src/pages/notes/[slug].astroのように書きます。slugはURLの読みやすい識別子です。ファイル名が可変になっていても、そのページが必ずリクエスト時に描画されるという意味ではありません。

静的サイトでは生成するURLを列挙する

getStaticPaths()がparamsを含む配列を返すと、Astroが各URLのHTMLをビルドします。paramsのキーはファイル名の[slug]と一致させます。propsにはURLに含めないページ用データを渡せます。関数内は分離されたスコープなので、必要なデータは関数内で作るかimportします。

paramsはURL、propsは表示用の入力

Astro.params.slugには対応するURLの値、Astro.propsにはgetStaticPathsで渡したデータが入ります。例えばslugはharbor、titleは「港の散歩」にできます。英数字の識別子と日本語タイトルを分けると、題名を変えてもURLを保ちやすくなります。

存在しないURLとオンデマンドとの違い

静的ビルドで生成しなかったURLのページは存在しません。新しい記事を追加したら再ビルドが必要です。10で扱うオンデマンドの動的ルートはリクエストごとにparamsを読み取り、getStaticPathsを使わずにデータの有無を確認します。

• 複数階層を扱う[...slug]はrest parameter
• 404ページはsrc/pages/404.astroで用意できる。実際の配信は公開先でも検証する

2件の詳細ページを事前生成する

---
export function getStaticPaths() {
  const notes = [
    { slug: 'harbor', title: '港の散歩' },
    { slug: 'mountain', title: '山の喫茶店' },
  ];
  return notes.map((note) => ({
    params: { slug: note.slug },
    props: { title: note.title },
  }));
}
const { slug } = Astro.params;
const { title } = Astro.props;
---
<h1>{title}</h1>
<p>記事ID：{slug}</p>
<a href="/">ホームへ</a>

outputを変更していない静的構成での独立例です。/notes/harbor/と/notes/mountain/を生成します。完全なhead等は05のレイアウトで補えます。