1. ホーム
  3. Next.js+Cloudflare Pages+microCMSで無料でブログを作ってみた

Next.js+Cloudflare Pages+microCMSで無料でブログを作ってみた

本ページはプロモーションが含まれています

 


Next.js+Cloudflare Pages+microCMS という構成でブログを作ってみたので、備忘録がてら流れをまとめる。他にも同じようなことをしようとする人がいるかもしれないので何かの参考になれば嬉しい。

作ったブログ（最終成果物）


要件を考える

  • サーバー代は無料にしたい
  • いずれ独自ドメインにしたい（ドメイン代だけ払えばOK、の状態にしたい）
  • ページの速度を早くしたいので、Jamstackで作ってみたい
    • できるだけ簡単にしたいので、microCMSテンプレートを活用するのもあり
    • 自分は本を買ったので、その通りに作ってみた
  • ブログが育ったらいずれ広告を載せたい
    • Netlifyは別ブログで試してみたので違うの使ってみたい
    • Vercelは広告NG
    • 今回はCloudflare Pagesというのを使ってみよう

作成の流れ

以下の本を参考にして一からコードを書いていった。


まったく同じものにはならないが、以下のmicroCMSテンプレートを使うとほぼ同じものが作れる



作れたら、githubとCloudflare Pagesを連携し、pushするたびに自動でデプロイするようにした。これも簡単でCloudflare Pages側をポチポチしていたらできる。日本語化されているので迷うこともなかった。

つまづきポイント①runtime = "edge"

初回デプロイがエラーになった。調べたところ、どうやらvercelとは環境が異なるようで、「export const runtime = "edge";」という記述を追加する必要があるようだった。一文を追加したのは以下のファイル。一行追加するだけで問題なくデプロイできるようになった。

  • /news/[slug].tsx
  • /news/category/[id].tsx
  • /news/category/p/[current].tsx
  • /news/p/[current].tsx
  • /news/search.tsx

つまづきポイント②nodejs_compat

デプロイできたので、今度はページにアクセスしたらエラーになった。どうやら「nodejs_compat互換性フラグ」という設定が必要らしかった。だが、管理画面を見ていてもそれらしい設定箇所が見つからなかった。それっぽい箇所を見つけて編集しようとしたところ、プルダウンになっていたが、「nodejs_compat」というのがなかったのでどうやったら設定できるのか謎だった。

解決方法は非常にシンプルで、実はプルダウンで選択する以外にフリーテキストで入力することができ「nodejs_compat」とただ入力すればよかった（その通りエラーは出ていたが、入力方法がわかりづらい）


つまづきポイント③問い合わせフォーム

最初、フォームについてはmicroCMSで案内されているHubspotを使っていた。Vercelでは問題なく動いていたが、なぜかCloudflare Pagesでフォームを送信したところエラーになってしまった。原因はよくわからないが、どうやらCloudflare Pagesとフォームは相性が悪いらしく、送信できないらしい（使えるようにするのが大変そうな予感がしたので、詳しくは調べていない。うまいことやる方法はあるのかも）

代替案を検討していたところ、良いツールを見つけたので採用した。


SSG（静的サイトジェネレーター）向けのフォームとのこと。フォームの送信データをサーバー側に保持せず、フォーム投稿内容からメールを送信するだけとのこと。実装方法もサンプルコードの通りに実装すれば動いたので非常に簡単だった。Hubspotでつまづいていたので、非常に助かる。reCAPTCHA設定などもできるようなので後日試してみたい

今後の展望

  • 今は教科書通りに作ったテンプレートをCloudflare Pagesで動くように少しカスタマイズしただけなので、もう少し自分好みにカスタマイズをしていこうと思う。
  • 投入されているコンテンツもダミーコンテンツなので、今後ブログのテーマを決めてちゃんとしたブログに育てていこうと思う（広告も貼れる環境にできたので）
  • 独自ドメインは設定したい。何か取得するか、サブドメにするか
  • microCMSのブログを見ていると関連記事機能を作ることができるらしい。やってみようかな。
  • GA4はカスタマイズとか、ドメイン周りが決まったら設定しようと思う。
  • フォームはCSS適当に装飾したのでもう少しきれいにしたい。reCAPTCHA設定のついでに
  • WebhookでmicroCMSの記事を更新したらデプロイする設定も入れる（これは簡単）

Github（今回つくったやつ）

参考になるかわからないが、以下にアップしているので素人のものでよければ・・・（ほとんど本に書いてあることを参考にして、自分なりにちょっとアレンジしたものです）