Next.js + Cloudflare Pagesで記事の予約投稿を実装する

毎日ブログ記事を公開したいけど、毎回手動でdraft: falseに変更してデプロイするのは面倒ですよね。

この記事では、publishDateフィールドを使って記事の予約投稿を実現する方法を紹介します。

<callout type="tip" title="予約投稿の全体像">

記事のfrontmatterにpublishDateを設定しておき、毎日の定期ビルドで日付を比較することで、指定日以降に自動公開される仕組みを作ります。

</callout>

従来の問題点

多くのNext.jsブログでは、記事の公開/非公開をdraftフラグで管理しています：

<callout type="warn" title="手動管理の問題点">

この方法だと、公開するたびに以下の手順が必要です：

1. ファイルを編集してdraft: falseに変更
2. コミット＆プッシュ
3. デプロイを待つ

毎日投稿するには手間がかかりますね。

</callout>

解決策：ビルド時の日付判定

publishDateフィールドを導入し、ビルド時にその日付と現在日付を比較することで、自動的に公開/非公開を判定します。

Mermaid Diagram

Loading diagram...

メリット

• コミット履歴が汚れない - GitHub Actionsで毎日自動コミットする方法と違い、不要なコミットが発生しない
• シンプル - 記事にpublishDateを書くだけ
• 柔軟 - いつでも公開日を変更できる

実装方法

1. 型定義にpublishDateを追加

2. 記事取得ロジックを修正

<callout type="info" title="ポイント">

• publishDateが設定されている場合はそちらを優先
• publishDateがない場合は従来のdraftフラグで判定
• UTCで統一することで、ビルド環境のタイムゾーンに依存しない
• これにより既存の記事との後方互換性を維持

</callout>

3. Cloudflare Pagesの定期ビルド設定

記事が自動公開されるには、毎日ビルドを実行する必要があります。

<details-block title="Deploy Hookの作成手順">

1. Cloudflare Dashboard → Pages → プロジェクト → Settings
2. 「Builds & deployments」→「Deploy hooks」
3. 新しいhookを作成してURLをコピー

</details-block>

GitHub Actionsワークフロー

<details-block title="GitHub Secretsの設定手順">

1. リポジトリ → Settings → Secrets and variables → Actions
2. 「New repository secret」をクリック
3. Name: CLOUDFLARE_DEPLOY_HOOK
4. Value: コピーしたDeploy Hook URL

</details-block>

使い方

記事のfrontmatterにpublishDateを設定するだけ：

動作の流れ

Mermaid Diagram

Loading diagram...

まとめ

<callout type="success" title="おすすめ">

一度設定してしまえば、あとは記事を書いてpublishDateを設定するだけ。ブログ運営の手間を大幅に削減できます。

</callout>

この方法は、Cloudflare Pages以外のホスティングサービス（Vercel、Netlifyなど）でも同様に実装できます。定期ビルドの方法は各サービスのドキュメントを参照してください。