WordPressからVercel + Next.js + microCMS環境へ移行してみた感想

従来まで本ブログをWordPressで構築していたのですが、WordPress環境のサーバー代が毎月1,000円くらいかかっていたのでVercel + Next.js + microCMS環境へ移行しました。

どうして環境を移行しようと思ったのか

WordPress環境の場合、レンタルサーバーが必要になります。レンタルサーバーには「Xserver」や「さくらのレンタルサーバ」といったものがあります。
このレンタルサーバー代に、安くても約500円程度かかってしまうので趣味のブログサイト運営のコストとしては地味に高いですよね。
(500円の場合1年間だと6,000円…焼肉食べにいけちゃいます🥩)
そのため無料で運用できる環境がないか調査してみたところ、Vercel + Next.js + microCMSという組み合わせが気に入ったのでご紹介させていただきます。

WordPressとは

WordPressとは、よくブログサイトを構築するために使用されるシステムです。
このWordPressのシステムを用いることで、プログラミングが出来なくても高品質なブログの作成ができます。
またWordPressのプラグインという機能で、ブログサイトを豊富にカスタマイズすることができます。

Vercelとは

「Vercel」というWebホスティングサービス(Webサイト等を公開できるサービス)の登場で
・高パフォーマンス
・無料～
で運用できます。
Webホスティングサービスには「Vercel」の他、「Netlify」や「Cloudflare Pages」などがあります。

Next.jsとは

Next.jsはReactベースのJavaScriptのフレームワークです。
Reactというのは、効率よくUIが作成できるJavaScriptライブラリ。
Next.jsというのがReactにサーバー機能を付加したものです。
後述のmicroCMSへの接続のためサーバー機能が必要→Next.jsを使用します。

microCMSとは

microCMSとはAPIベースのヘッドレスCMSです。
ブログはこのmicroCMSに書いていきます。
WordPressからVercel + Next.js + microCMSへ移行するメリットとして、
Next.js(ブログシステムの処理)とmicroCMS(ブログの執筆)が分離できる面があります。

ここまでの全体の流れとしては
①microCMSでブログを書く
②Next.jsで表示するブログを処理する
③Vercelで表示するブログを配置する
となります。(※ざっくりとしたイメージ)

環境を移行してみた感想

【良かったところ】
・アニメーション、3D描画、より凝った表現などNext.jsを使用するため比較的簡単に実装可能
・月額料金のサーバー代がかからなくなった
【課題点】
・WordPressの便利なプラグインは使えないので、基本的に自分で実装する必要がある
・microCMSのAPI数が無料プランだと最大3つなので、大規模なブログ運用をする場合はmicroCMSの有料プランを検討する必要があるかも
https://microcms.io/pricing

まとめ

趣味レベルのブログの場合、個人的には環境を移行して大正解でした！
ただしVercelの無料プラン(Hobbyプラン)は、規約的にアフィリエイトサイトなど収益化ができません。
収益化を考える場合は
①Vercelの有料プランに加入する
②Cloudflare Pages + Next.js + microCMSなど、収益化OKな別のホスティングサービスを使用した組み合わせ
等で対応する必要があります。
ちなみにVercel + Next.js + microCMSの組み合わせの実装は以下の記事が非常に優秀でしたので、ぜひ参考にしてみてください。
https://blog.microcms.io/microcms-next-jamstack-blog/