😸
Webサイトの一部をヘッドレスCMS(microCMS)でCMS対応してみる

2025/03/30に公開
Next.js
microCMS
tech
ヘッドレスCMSでブログ作ってみました。みたいな記事はよく見かけるのですが、ヘッドレスCMSってもっとちょい利用でも便利なものだよ。って思うので試してみます。

 やってみることv0をはじめとして、boltやlandingsite.aiなど、AIがLP作りますみたいなサービスがどんどん増えてきているので、そこで作った1ページ構成の簡単なWebサイトの一部をCMSで管理できるようにし、フロントエンドが全く分からない運用者が簡単に更新できるようにします。

 利用するもの
 AIに作らせたWebサイト今回はこちらを利用します。

ほぼv0に作らせたNext.jsのプロジェクトです。

このサイトのスタッフ紹介の部分をCMSで管理できるようにします。

https://abc-hair.pages.dev/

 ヘッドレスCMS今回はmicroCMSを使ってみます。

料金プラン変更で界隈をざわつかせましたが、無料プランはAPIの数が3個から5個に増えるなど、個人ユーザー向けには優しくなりました。

 microCMSの設定まずはmicroCMSで新しいサービスを作成します。

一から作成するでOK
作ったサービスにアクセスすると以下の画面が表示されるので、これも自分で決めるで進めます。
API名とエンドポイントを適当に設定。

APIの型はリストを選択(スタッフのリストになるため)

APIスキーマは以下のように設定します。

!ここで設定した内容がCMSで管理できるコンテンツとなり、APIを通して取得して利用できるようになります。

そのため、ここの項目は既存Webサイトの項目に合わせます。

v0に作らせたプロジェクトだとスタッフの情報は以下のように管理されているので、この項目名とmicroCMSのフィールドIDを合わせておくとのちのち楽です。
const staffMembers = [
  {
    name: "山田 花子",
    nameEn: "Hanako Yamada",
    image: "/staff1.jpg?height=400&width=400",
    comment: "自然体の美しさを大切に。\nあなたらしさを引き出すお手伝いをします。",
    accentColor: "border-rose-300",
    oneWord: "笑顔が一番の美容液",
  },
・
・
APIの準備ができたらコンテンツを追加して、右上のAPIプレビューをクリックします。
取得をクリックするとレスポンスが確認できますね。

このGETって書いてあるところのURLに、以下のようにリクエストを送るとデータが取得できるってことが分かります。
GETでリクエスト
ヘッダーにX-MICROCMS-API-KEYを含める
これに加えてクエリパラメータを指定するとデータ件数の指定や並び替え、絞り込みなどを指定できますが、いったん今回は不要です。

https://document.microcms.io/content-api/get-list-contents#h91d3988597
これでCMS側の準備は完了

 フロントエンドを更新する今回の場合は、app/page.tsxでAPIリクエストを送る処理を書き、取得したデータをcomponet/staff-section.tsxに渡します。
app/page.tsx
import { Button } from "@/components/ui/button"
 import { MapPin, Clock, Phone, Instagram, Facebook } from "lucide-react"
 import { MenuTable } from "@/components/menu-table"
 import { Navigation } from "@/components/navigation"
-import { StaffSection } from "@/components/staff-section"
+import  StaffSection  from "@/components/staff-section"
+
+export default async function Home() {
+  // CMSからスタッフデータを取得
+  const res = await fetch("https://abc-hair.microcms.io/api/v1/staff", {
+    headers: {
+      "X-MICROCMS-API-KEY": "*********************************",
+    },
+  })
+  const staffData = await res.json()

-export default function Home() {
   return (
app/page.tsx
-      <StaffSection />
+      <StaffSection staffMembers={staffData.contents} />
componet/staff-section.tsx
-const staffMembers = [
-  {
-    name: "山田 花子",
-    nameEn: "Hanako Yamada",
-    image: "/staff1.jpg?height=400&width=400",
-    comment: "自然体の美しさを大切に。\nあなたらしさを引き出すお手伝いをします。",
-    accentColor: "border-rose-300",
-    oneWord: "笑顔が一番の美容液",
-  },
-  ・・・
-  //省略
-  ・・・
-]
+type StaffMember = {
+  name: string
+  nameEn: string
+  image: {
+    url: string
+    height: number
+    width: number
+  }
+  comment: string
+  accentColor: string
+  oneWord: string
+}
+
+
+type StaffSectionProps = {
+  staffMembers: StaffMember[]
+}

-export function StaffSection() {
+export default function StaffSection({ staffMembers }: StaffSectionProps) {
   return (
componet/staff-section.tsx
-                <Image src={staff.image || "/placeholder.svg"} alt={staff.name} fill className="object-cover" />
+                <Image src={staff.image.url || "/placeholder.svg"} alt={staff.name} fill className="object-cover" />
npm run devで表示の確認をして、元と同じ表示なっていればOKです。
microCMS側で変更してみます。

キャッシュを削除して再読み込みすると変更が確認できました。

 webhookの設定をする以上で特定セクションのCMS化は完了ですが、APIへリクエストを送ってデータを確認するのがサイトの生成時だけって設定(SSG)の場合は、コンテンツ変更があったタイミングでサイトの再生成してねって通知(webhook)を送る必要があります。
microCMSの場合は API設定→webhook→追加で設定可能です。
サイトのデプロイをしているホスティングサービスでDeploy hooksのURLを取得する必要があるので、利用中のサービスで確認して設定したら完了。

 所感フロントエンドの調整でちょっとはまりましたが、無事、v0に作ってもらったサイトにCMSを導入することができました。

まあまあの規模のあるサイトだとCMS決めてからフロントエンドとかって流れになりますが、個人開発のサイト規模であれば、こんな感じで更新頻度の高いコンテンツだけCMS化ってできるのがヘッドレスCMSの利点でもあります。

ブログを追加したければ同じような流れで追加すればよいだけなので簡単ですね。
このぐらいのサイトであればmicroCMSの無料版で問題ないですが、サイトの規模が大きくなるとAPI数5個だと足りなくなってくるのと、問い合わせの機能を持っていないので、他のヘッドレスCMSも使ってみたくなりますね。
エンドポイントのURLとAPIキーを更新すれば乗り換えが簡単なのもヘッドレスCMSの利点だと思います。
やってみること

利用するもの

AIに作らせたWebサイト

ヘッドレスCMS

microCMSの設定

フロントエンドを更新する

webhookの設定をする

所感

Discussion
