2026.10.20実績

Next.jsとCloudflareで、お知らせだけを更新できるミニCMSを作りました

お知らせだけを管理画面から更新できる、小さなCMSを作りました。
公開サイトも管理画面もNext.jsで作り、Cloudflareで動かしています。

作った理由

これまではお知らせ程度の更新のためだけでも、WordPressやmicroCMSなどのCMSの導入を提案して実装してきました。
WordPressを使わない場合は、配布されているPHPやCGIのプログラムを使って更新機能を実装したこともあります。

ただ、更新したいのがお知らせだけなら、WordPressやmicroCMSの機能の多くは使いません。
そこで今回はお知らせを更新する仕組みを管理画面も含めて自分で作ることにしました。

費用をなるべく抑えたいクライアントに、「WordPressやmicroCMSを入れなくても管理画面からお知らせを更新できます」と提案するためのデモとして作っています。
費用をかけられる案件では、microCMSやKurocoも提案します。

デモの管理画面は公開していないので、画面の写真で紹介します。

まずはログイン画面です。IDとパスワードでログインします。

ログインすると、お知らせの一覧が出ます。下書きも含めて新しい順に並び、行をクリックすると編集画面に移ります。

編集画面ではタイトル、投稿日、本文、公開か下書きかを入力します。本文はボタンで見出しや太字、リンク、箇条書きを付けられる簡易的なエディタで、公開サイトと同じ見た目のまま書けます。

画像は「画像」ボタンから選んで入れます。

保存すると「保存しました」と出て、そこから公開サイトの記事を開けます。公開サイトには1〜2秒で反映されます。

公開サイトではこのように表示されます。

スマホからでも同じように更新できます。

費用を抑えることと、お知らせの更新に必要なものだけにすることを重視して、次のものを選びました。

デモはCloudflareの無料プランで動かしていて、0円です。

本番ではWorkersの有料プラン（月5ドル。1ドル150円で約750円）を勧めます。無料プランは処理に使える時間（CPU時間）の上限が短く、ページを作り直す処理が収まらないためです。

費用は主にアクセス数で決まり、目安として月数十万PVまでは月5ドルのままです。このほかにドメイン代がかかります。

今回作ったのは、お知らせを更新するための最小限の機能です。

IDとパスワードの設定はCloudflare側に置いているので、変えるときはCloudflareのアカウントの管理者（このデモでは私）が登録し直します。

ただ、どれもあとから拡張できます。たとえば次のような機能も入れられます。

カテゴリ：お知らせにカテゴリの項目を足して、一覧で絞り込めるようにする
予約公開：公開日時の項目を足して、その日時を過ぎた記事だけを表示する
アカウント：IDとパスワードをデータベースに置く形に変えれば、アカウントを複数作ったり、クライアントが管理画面からアカウントを追加したり、パスワードを変えたりできる
そのほか：サムネイル画像、PDFの添付、下書きのプレビューなど

実際の案件では必要なものだけを足せます。

公開サイトのデモはこちらです。記事と写真はすべてサンプルです。

管理画面は公開していません。誰でも投稿できるようにすると、不適切な記事や画像を投稿されたり、画像の保存先（R2）の無料枠を超えて請求が来たりするおそれがあるためです。

「お知らせだけ自分たちで更新できればいい」というサイトの相談があれば、気軽にお問い合わせください！

inaro.dev