【MDX】MDXで手軽に下書き記事を管理する方法【Next.js】

このブログはNext.jsで作られていて、記事はMDXファイルとして管理されています。

ブログを実装する際に考慮しなくてはいけないことの一つとして、下書き記事をどう管理するかということが挙げられるかと思います。

実装方法は色々あると思いますが、本記事ではこのブログでどのように下書き記事を管理しているかについてを紹介させていただければと思います。

前提条件

内容を見ていく前にこれから紹介する方法の前提条件を記載しておきます。

よくありそうな実装の問題点

MDX製のブログで下書き記事を扱う場合、まず思いつくのはMDXのフロントマター（---で囲まれた記事のメタ情報を入力できる欄）に公開か下書きかの値を持たせておく方法です。ビルド時には公開状態の記事のみを取得し各ページを生成します。

フロントマターで管理する場合の例をいくつか挙げてみます。

公開状態の場合

公開状態を管理するフラグとしてフロントマターにpublishedの項目を持たせます。公開状態の場合はtrueを設定します。

公開記事サンプル.mdx
1---
2published: true
3---
4
5公開状態の記事です。

下書き状態の場合

下書きにしたい場合はfalseに設定します。

下書き記事サンプル.mdx
1---
2published: false
3---
4
5下書き状態の記事です。

ビルドで各ページを生成する際は、publishedがtrueの記事のみを取得します。その結果、下書き記事は記事として生成されることはなくなります。この実装でも問題はなさそうです。

ただしいくつか問題点があります。

まず、下書き記事を除外すると下書き記事が公開時にどう表示されるかがプレビューで確認できません。別途プレビュー用の仕組みを何か考えなければなりません。

また、以下のような場合に下書き記事を都度除外する必要が出てきたりで意外と面倒臭いことがわかります。

• サイトマップを自動生成する場合
• 検索機能をつけようとする場合。実装方法によっては下書き記事を除外しないといけない可能性がある。
• 一覧記事のページ生成
• カテゴリ別一覧記事のページ生成
• etc...

MDX製のブログでは記事自体もGitで管理することがほとんどだと思います。そうなると下書き記事もGit上で管理することになります。個人的には下書き記事をGitで管理することも避けたいです。

実装が意外と大変そうに感じたので、このブログでは別の方法で下書き記事を管理することにしました。

実現したいこととしては下記になります。

これを冒頭で説明したようなフロンマターの項目として管理せず、もっと手軽に実現したいのです。

やり方

方針としては非常に簡単で、下書き記事をGitで管理できないようにします。

具体的な方法としては、

まず、ファイル名に含める下書き用のプレフィックスを決めておきます。下書き記事の場合はそのプレフィックスをファイル名につけます。（このブログでは下書き記事にファイル名の先頭にアンダースコア（_）をつけるようにしています。）

次に、それらをGit管理対象外にします。そのために.gitignoreに上記プレフィックスがついているファイル名を指定します。

以下は.gitignoreの例です。ファイル名の先頭にアンダースコア（_）がついた記事をGit管理対象外としています。

.gitignoreに記載する例
1# MDXファイルを/src/contents配下で管理しているとします。
2/src/contents/**/_*.mdx

方法としてはこれだけです。

こうするだけで（別途実装の必要なく）以下を実現できます。

• Git管理対象外なのでビルド時には下書き記事がそもそも存在しない。下書き記事を除外する処理が不要になる。
• ローカル環境上には下書き記事は存在するので、プレビューをしたいときはローカル環境上で確認ができる。(プレビュー機能の実装も不要)
• 公開記事を非公開にしたい場合は、再度ファイル名にプレフィックスをつけて再ビルドをかけるだけでOK（ファイル名が変更されているのでGit上では変更前の記事は削除扱いになる）

また、ファイル名を見るだけで下書きかどうかがわかります。ファイルを開かなくても記事の公開状態がわかるのもちょっとした利点になっています。

執筆者と開発者が分かれているのであればこの方法はとりにくそうですが（その場合はHeadlessCMS使いましょう:)）、個人で運用するブログなら全然ありかなと思ってます。楽ですし。

やり方としては非常に簡単だと思うので気になった方はぜひ試してみてください。