• Webサイトを作るとき、記事やお知らせをどう管理するかは大事なポイント。
• HTML直書きだと更新が大変…。
• そこで使えるのが microCMS。管理画面から記事を投稿すれば、サイトに自動反映される！

ステップ 1：microCMSでAPIを準備

1. microCMSに無料登録
2. 「ブログ」サービスを作成
3. フィールド（タイトル、本文、アイキャッチ画像など）を設定
4. APIエンドポイントをコピー

ステップ 2：Next.jsでデータを取得

シンプルなサンプルコード👇

// pages/index.js
export async function getStaticProps() {
  const res = await fetch(
    `https://YOUR_SERVICE.microcms.io/api/v1/blog`,
    { headers: { 'X-API-KEY': process.env.MICROCMS_API_KEY } }
  )
  const data = await res.json()

  return { props: { blogs: data.contents } }
}

export default function Home({ blogs }) {
  return (
    <div>
      <h1>ブログ一覧</h1>
      <ul>
        {blogs.map(blog => (
          <li key={blog.id}>{blog.title}</li>
        ))}
      </ul>
    </div>
  )
}

ステップ 3：完成イメージ

• microCMSの管理画面から記事を投稿
• 数分後にはサイトのトップページに新しい記事が表示される
• HTML編集不要！

まとめ

• microCMSを使うと「更新作業」をオーナーさん自身でもできる
• Web制作者は「設計・デザイン」に集中できる
• カフェやサロンのHPに「お知らせ」や「キャンペーン情報」を載せるのに相性バッチリ！