841-biborokuWebフロントエンドの備忘録

ブログをAstro v5 Content Loader API・microCMSにリニューアル - 記事詳細ページ編 -

AstromicroCMSヘッドレスCMS

この備忘録ブログを最初に作ったときはNext.js（Pages Router）を採用していましたが、このたび心機一転、Astro v5 へリニューアル中です🎈

前回の「ブログをAstro v5 Content Loader API・microCMSにリニューアル - Zodの型定義編 -」に続き、今回は記事詳細ページの実装をまとめます。

Content Layer APIを使うことで、型安全かつ高速なページ生成が実現。

動的に記事詳細ページを生成

動的パラメータを定義するためファイル名を[path].astroで作成（ファイル名は任意。slugなどでもOK）。

型定義の準備

前回作成したcontent.config.tsで作成したスキーマを詳細ページでも使い回せるように export しておきます。

content.config.ts

export const ArticleSchema = z
  .object({
      // 各フィールドの型
  })
  .merge(microCMSContentIdScheme)
  .merge(microCMSDateScheme);

getCollectionで全記事の展開

1. 全データの取得

content.config.tsで設定したローカルキャッシュ（Content Layer）から、getCollectionで全記事のデータを配列で取得します。

すでに取得済みのデータを使うため、再fetchする必要がありません。

[path].astro

export async function getStaticPaths() {
  const articles = await getCollection("articles");
  return articles.map((article) => ({
    params: { path: article.data.フィールド },
    props: { article },
  }));
}

2. URL（パス）の指定

paramsにmicroCMS側で設定した一意の値を登録しているフィールドを使ってURLに使うパラメータを指定します。

3. データの受け渡し

propsにgetCollectionで取得した記事データをそのまま渡します。

Zodの型をそのまま使う

CollectionEntryを使うことでZodで定義したバリデーション済みの型がそのまま反映されるので、安全で便利です✨

👉 Astro公式のCollectionEntry

import { getCollection, type CollectionEntry } from "astro:content";

interface Props {
  article: CollectionEntry<"articles">;
}

コンテンツの展開

あとはAstro.propsで受け取って、各フィールドを展開するだけです。

定義したフィールドが補完されるので実装がスムーズです。

[path].astro

const { article } = Astro.props;
const { publishedAt, title, 他のフィールド} = article.data;

まとめ

今回は記事詳細ページを中心にまとめました。

型定義やコンテンツキャッシュを活用してデータを再利用することで、とてもシンプルに出力できました😇

次回は、記事一覧ページについて書きたいと思います。

シェア

Category