mdxファイルから記事ページを自動で出力する Astroを使ってオウンドメディアを作る-3

第3回目では、.mdxファイルから記事ページを出力する設定を解説します。

追加パッケージのインストール

Astroは標準でMarkdownの出力をサポートしていますが、MDX（Markdown+JSX）に対応するためには、追加パッケージをインストールする必要があります。

npm install @astrojs/mdx

astro.config.mjsに下記を追加します。

import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx'; //追加

export default defineConfig({
  // ...
  integrations: [mdx()], //追加
});

コンテンツコレクション

Astroにはコンテンツコレクションという、コンテンツの管理を効率的に行うための仕組みがあります。
特定の種類のデータ（例：.md、.mdx、.jsonなど）をsrc/content配下に保存します。

このフォルダ内のデータはAstroのgetCollectionメソッドを使用して簡単に取得することができます。
取得したデータは配列として整列やフィルタリングが可能で、FrontMatterのメタデータと組み合わせることで、日付順やカテゴリ順などさまざまな条件で記事データを出力することができます。

getCollectionで記事データを取得・出力する

pagesフォルダ直下に[...slug].astroを作成します。
この記事ページの場合は下記のようにしています。

---
import { type CollectionEntry, getCollection } from "astro:content";
import PostLayout from "@layouts/PostLayout.astro";

const currentPath = Astro.url.pathname;

export async function getStaticPaths() {
  const posts = await getCollection("techblog");
  return posts.map((post) => ({
    params: { slug: post.slug },
    props: post,
  }));
}
type Props = CollectionEntry<"techblog">;
const post = Astro.props;
const { Content } = await post.render();
---

<PostLayout {...post.data} path={currentPath}>
  <Content />
</PostLayout>

Astroのコンテンツコレクションを操作するためには、次のように必要なモジュールをインポートします。

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

getStaticPaths

getStaticPathsを使用しコンテンツコレクション内のデータからページのパスを作成します。
ここでは、getCollection を使って “techblog” コレクションからすべての投稿を取得し、各投稿のスラッグを使ってページパスを生成します。
paramsで各ページのパラメータを指定します。ここではslugというパラメータを設定し、URLパスの一部として使います。
propsで各ページに渡すプロパティを指定します。ここでは、取得した記事データを渡しています。
これにより動的にページが生成され、各記事の内容が表示されます。

getStaticPathsから渡されたプロパティを以下のようにレイアウトに渡し、レンダリングしています。
Contentには記事の本文が含まれています。

const post = Astro.props;
const { Content } = await post.render();
---

<PostLayout {...post.data} path={currentPath}>
  <Content />
</PostLayout>

記事本文をMarkdown（MDX）で管理することで、一貫性を保ったページ作成を行うことができます。
コンテンツの更新や追加機能の実装もすぐに全ページへ反映できるだめ、サイトのメンテナンスや拡張が効率的に行うことができます。
また、Markdownは汎用性が高いので、別のフレームワークへの移行や再構築の際もスムーズに対応できます。

Astroのコンテンツコレクション機能をうまく活用することで、効率的にコンテンツ管理が行えます。
弊メディアでも、カテゴリ一覧ページやタグ検索機能の追加を予定しており、さらに充実したコンテンツ体験を目指していきますので、どうぞご期待ください。