Astroで動的なページを作成する

Astroで動的ルーティングを使う方法をメモ。

サンプルコード

まずはページ生成に使用するデータを用意します。
今回は例として、 src/data/articles.js に以下のような記事データを追加します。

export const articles = [
  {
    id: '00005',
    title: '記事タイトルE',
    body: '<p>記事本文E</p>'
  }, {
    id: '00004',
    title: '記事タイトルD',
    body: '<p>記事本文D</p>'
  }, {
    id: '00003',
    title: '記事タイトルC',
    body: '<p>記事本文C</p>'
  }, {
    id: '00002',
    title: '記事タイトルB',
    body: '<p>記事本文B</p>'
  }, {
    id: '00001',
    title: '記事タイトルA',
    body: '<p>記事本文A</p>'
  }
];

このデータのidの項目を使って、記事の詳細ページを生成してみます。
動的なページを生成するには、src/pages/article/[id].astro のように使用するデータの項目名を [] で囲ったファイル名にします。

---
import Layout from '../../layouts/Layout.astro';
import { articles } from '../../data/articles.js';

// 動的ページのルート設定
export function getStaticPaths() {
  const articleParams = articles.map((article) => {
    return {
      params: {
        id: article.id
      }
    }
  });
  return articleParams;
}

// 現在のページの情報
const { id } = Astro.params;
const thisArticle = articles.find((article) => article.id === id);
---
<Layout>
  <h1>{ thisArticle?.title }</h1>
  <div set:html={ thisArticle?.body }></div>
</Layout>

getStaticPaths()は動的ルーティングのURLを示す関数で、上記コードの場合最終的に以下のような配列をreturnしています。

export function getStaticPaths() {
  return [
    { params: { id: '00005' } },
    { params: { id: '00004' } },
    { params: { id: '00003' } },
    { params: { id: '00002' } },
    { params: { id: '00001' } }
  ];
}

これで以下のようなページが生成できました。
記事タイトルA
記事タイトルB
記事タイトルC
記事タイトルD
記事タイトルE