Next.js App Router向けのMDXコンテンツマネジメントツールを自作する という記事で作成したコードを基に、npmでインストール可能なパッケージ Regista を作成しました。

概要

RegistaはNext.js App RouterでMDXコンテンツを管理するパッケージです。主にDynamic Routesによって各MDXコンテンツに対応したページを動的に作成する用途を想定しています。

// src/content.index.ts
import * as path from "path";
import { z, defineMdx } from "@cieloazul310/regista";

export const post = defineMdx({
  contentPath: path.resolve(process.cwd(), "content/post"),
  basePath: "/post",
  schema: {
    author: z.string().optional(),
  },
});
export type PostFrontmatter = z.infer<typeof post.schema>;
export type PostMetadata = z.infer<typeof post.metadataSchema>;

// src/app/post/[...slug].tsx
import NextLink from "next/link";
import type { Metadata } from "next";
import { post } from "@/content";

export async function generateStaticParams() {
  const allPosts = await post.getAll(); // => PostMetadata[]
  return allPosts;
}
export default async function Page({ params }: { params: { slug: string[] } }) {
  const { slug } = params;
  const item = await post.useMdx(slug);
  if (!item) return null;

  const { content, frontmatter } = item;

  return (
    <article>
      <header>
        <h1>{frontmatter.title}</h1>
        <small>
          <time>{frontmatter.date.toDateString()}</time>
          <span>post by {frontmatter.author}</span>
        </small>
      </header>
      <section>{content}</section>
    </article>
  );
}

動機

Next.jsは@next/mdxパッケージを使うことでMDXファイルから静的なページを作成することができますが、ファイルコレクションから動的にページを作成する方法はこれといったものが見つかりませんでした。

その目的に叶うパッケージとしては Contentlayer が挙げられますが、最終リリースは2023年6月、Next.js v14に未対応の状態のまま プロジェクトが止まっています 。(後から気付きましたが、Contentlayerをフォークした Contentlayer2 というパッケージが作成されているようです)

Next.jsの公式ドキュメントには next-mdx-remote というパッケージを使用して MDXファイルを扱う方法が記載されている ため、next-mdx-remoteを利用する方法を拡張して、勉強がてらMDXコンテンツやデータを扱うパッケージを作成してみました。

技術面

基本的な技術面は Next.js App Router向けのMDXコンテンツマネジメントツールを自作する という以前の記事がベースになっているため、そちらをご覧ください。

next-mdx-remoteの導入と削除

さて、当初は前述の通りnext-mdx-remoteを利用していましたが、Regista v1ではnext-mdx-remoteを使用していません。

元々の予定ではnext-mdx-remoteがv5になるタイミングで、Registaのv1をリリースする予定でした。ところが、next-mdx-remote v5がリリースされたと同時に、リポジトリのREADMEに 以下のような記載 が追加されていました。

You Might Not Need next-mdx-remote

If you’re using React Server Components and just trying to use basic MDX with custom components, you don’t need anything other than the core MDX library.

React Server Components(RSC)でMDXを使用するのであれば、MDXのコアライブラリで事足りるためnext-mdx-remoteを使う必要はない、という内容です。

READMEに記載されているサンプルコードを参考に、Regista v0のコードを書き換えることで、next-mdx-remoteへの依存を削除することができました。

ダム底の春 feat. Sobs / 日食なつこ (2023)