こんにちは、フロントエンドエンジニアの堀江（@nandemo_3_）です。
今回は特に書くことがないのですが、興味のあったヘッドレスCMSを触ってみたいなと思い、
無料で手軽に使うことができるmicroCMSを使ってブログを作ってみようと思います。
microCMSは無料枠があり、3個のAPIまで無料ということで、今回の要件程度であれば余裕で使えます。
サービス作成
早速、microCMSでサービスを作成していきます。
アカウント登録したら、すぐこの画面に行くと思います。
サービス作成には２種類あり、「１から作成する」「テンプレートから選ぶ」があります。
フロントエンドがすでにある、独自で作成するなどの要件であれば、「１から作成する」がおすすめです。
とはいえ、APIのテンプレートもあるので、簡単にAPIを作ることができます。
今回は、「テンプレートから選ぶ」を選択しました。
テンプレート選択
今回は、ブログ作成のため「個人ブログ」を選択しました。
microCMSには、Next.jsのテンプレートが用意されているので、非常にありがたいですね。
開発環境の構築
続いて、GitHub連携や環境構築になります。
GitHubの連携と任意のリポジトリ名を入力して進むと、Next.jsで作成されてブログテンプレートのリポジトリが作成されます。
開発環境も手順通りに設定していきます。
まずは環境変数です。microCMSがすでに用意しているAPIキーとドメイン名（サービスID）を指定します。
// .env MICROCMS_API_KEY=xxxxxxxxxx MICROCMS_SERVICE_DOMAIN=xxxxxxxxxx BASE_URL=http://localhost:3000
続いて、パッケージのインストールとプログラムの立ち上げをします。
npm install npm run dev
Node.jsが18以上が推奨なので、ご注意ください。 自分はnodeのバージョンが古かったので、失敗しました。
問題なく起動すれば、
http://localhost:3000/にアクセスすると、以下のページが表示されます。
Vercelにデプロイ
これも案内通り操作していきます。
デプロイ前に、Vercel側のEnvironment Variablesを設定します。
MICROCMS_API_KEY=xxxxxxxxxx MICROCMS_SERVICE_DOMAIN=xxxxxxxxxx BASE_URL=https://<YOUR-PROJECT-NAME>.vercel.app
BASE_URLはVercelのDomainを設定します。
デプロイが完了し、 管理画面にて、タグ、ライター、記事を追加すると、以下のような画面になります。
フロントエンドのアップデート
これだけだと、microCMSの手順通りに作業をしただけになるので、フロントエンド部分の変更をしていきます。
今回は爆速で作るので、muiのblogテンプレートを参考にします。
microCMSとmuiのプログラムの作りが違っているので、いい感じにマージしました。
トップページはこんな感じ
余談ですが、記事の内容はChatGPTで生成しています。サンプルデータを何件も作成しないといけない時とかほんとに助かりますよね。
ブログの詳細ページは今回変更していませんが、ヘッダーやフッダーが更新されているので、印象が少し変わりますね。
ソース
最後に
今回はかなり軽ーい内容ですが、爆速でヘッドレスCMSでブログを作成しました。
ヘッドレスCMSは以前にStrapiを使ったことがあり、色々設定が面倒で苦労した経験があったので、今回も苦労ポイントをがあるだろうなと想像していたのですが、全くそんなことなく、microCMSは非常に簡単に環境構築、API作成が行えて、びっくりしました。
引き続きフロントエンドに関する記事を書いていきます。
最後まで読んでいただきありがとうございました。
