Next.js + microCMSで企業サイトを構築する方法【実例付き】

2026年8月18日2026年9月4日

アイキャッチ — Next.jsとmicroCMSのロゴが繋がり、企業サイトが生成される概念図

「Next.jsで企業サイトを作るといいらしいけど、具体的にどうやるの？」「microCMSっていうサービスを使うと更新しやすいって聞いたけど、本当？」

こうした疑問を持つ方が増えています。情報を調べても、エンジニア向けの技術記事ばかりで、企業のWeb担当者が知りたい「全体像」がなかなか見えてきません。

この記事では、実際にNext.js + microCMSで企業サイトを構築・納品している制作者が、構築の全体像を「技術に詳しくない方にもわかるレベル」で解説します。具体的な手順だけでなく、費用感や運用のポイントまでお伝えします。

この記事の結論

Next.js + microCMSは「表示速度」「日本語対応」「セキュリティ」に強い構成で、設計→microCMS構築→Next.js開発→連携・テスト→デプロイの5ステップで構築します。費用はWordPressの2〜3倍、月額運用費は約7,600〜22,500円が目安です。更新頻度の低い小規模サイトならWordPressで十分なケースも多く、ビジネス要件に合わせた技術選定が重要です。

そもそもNext.js + microCMSの組み合わせとは？

Next.jsは「高速サイトを作る技術」、microCMSは「更新を管理するサービス」

この組み合わせを理解するために、レストランにたとえて説明します。

Next.js ＝一流シェフ（高品質な料理＝Webページを作る技術）
microCMS ＝メニュー管理システム（料理の内容＝コンテンツを管理する仕組み）

シェフがどんなに腕が良くても、「今日の日替わりメニュー」を管理するシステムがなければ、毎回シェフに頼まないとメニューを変えられません。microCMSがあれば、ホールスタッフ（Web担当者）がメニュー（コンテンツ）を自分で更新できるようになります。

技術的に言い換えると、Next.jsは表示を担当する「フロントエンド」、microCMSはコンテンツを保管・管理する「ヘッドレスCMS」（管理画面だけのCMS）です。この2つをAPI（データの受け渡し口）でつないでサイトを構成します。

Next.jsとmicroCMSの役割分担を示す図。左にmicroCMS（コンテンツ管理）、中央にAPI連携の矢印、右にNext.js（表示・配信）

なぜこの組み合わせが選ばれるのか

正直に言うと、企業サイトの構築方法はいくつもあります。その中でNext.js + microCMSの組み合わせが注目される理由は3つあります。

表示速度が圧倒的に速い ── ビルド時に完成済みのHTMLを生成するため、ユーザーを待たせません
日本語の管理画面で更新できる ── microCMSは日本製のサービスで、操作画面がすべて日本語
セキュリティが高い ── WordPressのような管理画面がサーバー上にないため、攻撃される面が少ない

ポイント

特に、microCMSが日本製で日本語対応が完璧という点は、海外製のヘッドレスCMSにはない大きな強みです。私がお客様に提案する際も、「管理画面が英語だと社内で使ってもらえない」というリスクがないことが決め手になるケースが多いです。

構築の全体像｜5つのステップ

全体の流れを把握する

Next.js + microCMSで企業サイトを構築する流れは、大きく5つのステップに分かれます。

ステップ	内容	所要期間の目安
① 設計	サイト構成・コンテンツ設計	1〜2週間
② microCMS構築	コンテンツの「箱」を作る	3〜5日
③ Next.js開発	サイトの見た目・機能を開発	2〜4週間
④ 連携・テスト	microCMSとNext.jsを接続、動作確認	3〜5日
⑤ デプロイ	Vercelで公開、独自ドメイン設定	1〜2日

トータルで1〜2ヶ月程度が目安です。WordPressサイトの制作期間（1〜1.5ヶ月）と比較すると、やや長めになります。

WordPressとの違いを意識しておく

WordPressの場合、テーマ（テンプレート）を選んでカスタマイズする「組み立て型」です。一方、Next.js + microCMSはすべてを設計図から作る「注文建築型」です。

注意

そのため、「テーマを選んでちょっと色を変えて完成」というわけにはいきません。その代わり、デザインの制約が一切なく、完全にオリジナルのサイトが出来上がります。

ステップ①②：microCMSでコンテンツの「箱」を作る

microCMSのアカウント作成と初期設定

microCMSは無料プランから始められるのが魅力です。現在の料金プランは以下のとおりです。

プラン	月額	主な上限
Hobby（無料）	0円	メンバー3名、コンテンツ1万件、転送量20GB/月
Team	4,900円	メンバー10名、コンテンツ2万件、転送量200GB/月
Business	75,000円	権限管理、カスタムフィールド拡張など

中小企業のコーポレートサイトであれば、Hobbyプラン（無料）またはTeamプランで十分です。私が制作を担当したお客様でも、Hobbyプランで運用されているケースがほとんどです。

イメージ図（実画面ではありません）スクリーンショット — microCMSの管理画面トップページ

コンテンツの「型」を設計する

microCMSでは、まず「どんな種類のコンテンツを管理するか」を設計します。企業サイトの典型的な構成は以下のようになります。

API名	用途	型の例
news	お知らせ	タイトル、本文、カテゴリ、公開日
works	実績紹介	タイトル、サムネイル、説明文、URL
members	スタッフ紹介	名前、役職、写真、プロフィール
pages	固定ページ	タイトル、本文（会社概要など）

ポイント

設計のコツは、「お客様が日常的に更新する部分」だけをmicroCMSで管理することです。会社の住所やロゴなど、ほぼ変わらない情報はNext.js側にコードとして書いておく方が、管理がシンプルになります。

実際のコンテンツ入稿イメージ

microCMSの編集画面は、WordPressのブログ投稿に近い操作感です。リッチエディタ（文字装飾や画像挿入ができるエディタ）が標準搭載されているため、HTMLの知識がなくても記事を書けます。

イメージ図（実画面ではありません）スクリーンショット — microCMSのリッチエディタでお知らせを編集している画面

Web制作・システム開発は
First CHにお任せください

「こんなWebサイトが欲しい」「このシステムは実現できる？」——
現役エンジニアが直接お話を伺い、最適な進め方をご提案します。

お問い合わせはこちら → LINEで気軽に相談する

「まだ構想段階」「費用感だけ知りたい」というご相談も歓迎です。

ステップ③：Next.jsで企業サイトを開発する

プロジェクトの構成

Next.jsのプロジェクトは、以下のようなフォルダ構成で作ります（専門的な話になりますが、概要だけ把握してください）。

my-corporate-site/
├── app/           ← ページの構成を定義
│   ├── page.tsx         ← トップページ
│   ├── about/page.tsx   ← 会社概要
│   ├── news/            ← お知らせ一覧・詳細
│   └── contact/page.tsx ← お問い合わせ
├── components/    ← 共通パーツ（ヘッダー、フッターなど）
├── lib/           ← microCMSとの接続処理
└── public/        ← 画像やフォントなどの静的ファイル

ポイント

ポイントは、App Router（Next.jsの最新のルーティング方式）を使うことです。以前のPages Routerに比べて、パフォーマンスが向上し、サーバーコンポーネント（サーバー側で処理してからブラウザに送る仕組み）が使えるようになっています。

microCMSとの接続

Next.jsからmicroCMSのデータを取得するには、microCMSが公式に提供しているSDK（開発キット）を使います。

// lib/microcms.ts（簡略化した例）
import { createClient } from 'microcms-js-sdk';

export const client = createClient({
  serviceDomain: 'your-service',  // microCMSのサービスID
  apiKey: process.env.MICROCMS_API_KEY!, // APIキー
});

// お知らせ一覧を取得する関数
export async function getNewsList() {
  const data = await client.getList({ endpoint: 'news' });
  return data.contents;
}

技術的な詳細は省きますが、大切なのはmicroCMSでコンテンツを更新すると、Next.jsのサイトに自動で反映される仕組みを作るということです。この自動反映の仕組み（Webhook連携）については、ステップ④で説明します。

デザインの実装

WordPressではテーマをカスタマイズしますが、Next.jsではTailwind CSS（テイルウィンドCSS）というスタイリングツールを使うのが主流です。

Tailwind CSSを使うと、HTMLの中にスタイル指定を直接書けるため、デザインの変更が素早く行えます。また、使っていないスタイルが自動的に削除されるため、サイトが軽量になるメリットもあります。

イメージ図（実画面ではありません）自社事例 — Next.js + microCMSで構築した企業サイトのBefore/After

ステップ④⑤：連携・テスト・デプロイ

Webhook連携で「更新→自動反映」を実現する

ここがNext.js + microCMS構成の最大のポイントです。

microCMSでコンテンツを更新した際に、Vercel（ホスティングサービス）に「コンテンツが変わりましたよ」と通知を送り、自動的にサイトが再ビルド（再構築）される仕組みを設定します。

流れを図にすると：

[Web担当者がmicroCMSで記事を更新]
    ↓ Webhook通知
[Vercelが自動でビルドを開始]
    ↓ 数十秒〜数分
[最新のコンテンツで本番サイトが更新される]

この仕組みにより、Web担当者はmicroCMSの管理画面で「公開」ボタンを押すだけで、プログラミングの知識なくサイトを更新できます。

microCMSからWebhookでVercelに通知し、自動ビルド・デプロイされるフロー図

更新してもすぐ反映されない？ microCMSとVercelの「キャッシュ」を理解する

「microCMSの管理画面で更新ボタンを押したのに、サイトの表示が変わらない」——これはNext.js + microCMSでよくあるつまずきです。原因は、Next.jsがfetch()で取得したデータを既定でキャッシュ（一定期間保存）する仕組みにあります。ここまで説明したWebhook連携は、実はこのキャッシュを消す方法の1つにすぎません。

フルビルド（先ほど説明したWebhook→Vercelの自動再ビルド）── サイト全体を作り直すため確実ですが、ページ数が多いサイトでは反映までの時間が長くなりがちです
オンデマンドISR（revalidateTag / revalidatePath）── Next.jsが持つキャッシュ破棄専用の関数を使い、更新されたページのキャッシュだけを個別に破棄する方法です。microCMSのWebhook通知先をNext.jsのAPI Route（Route Handler）に向け、その中でこの関数を呼び出す構成にします

// app/api/revalidate/route.ts（microCMSのWebhook通知の受け口。イメージ）
import { revalidateTag } from 'next/cache';
import { NextResponse } from 'next/server';

export async function POST() {
  revalidateTag('news'); // 該当するAPIのキャッシュだけを破棄
  return NextResponse.json({ revalidated: true });
}

ポイント

どちらを選ぶかは更新頻度とページ数で判断します。中小企業のコーポレートサイトのように更新頻度が低くページ数も少ない場合は、フルビルドで十分実用的です。ニュース欄が毎日更新される、ページ数が多いといったケースでは、オンデマンドISRで反映を高速化する価値があります。

なお、Vercel上で動くNext.jsアプリは、このfetch()のキャッシュをData Cacheという仕組みで保持しています。ローカルの開発環境では挙動が異なることがあるため、キャッシュが原因と思われる表示崩れは、本番（Vercel）環境で確認するのが確実です。

Vercelへのデプロイ

Vercel（ヴァーセル）は、Next.jsの開発元が運営するホスティングサービスです。Next.jsとの相性が最も良いため、特別な理由がない限りVercelを選ぶのがベストです。

デプロイ（公開）の手順はシンプルです。

STEP

GitHubにソースコードをアップロード

STEP

VercelでGitHubリポジトリを連携

STEP

独自ドメインを設定

STEP

SSL証明書（https化）は自動で設定される

一度設定してしまえば、以降はGitHubにコードをアップするだけで自動的にサイトが更新されます。

Vercelの費用については、関連記事で詳しく解説しています。

テストで確認すべきポイント

公開前に、以下のポイントを必ず確認します。

チェック項目	確認内容
表示速度	PageSpeed Insightsで90点以上を目指す
レスポンシブ	スマホ・タブレット・PCでの表示確認
OGP設定	SNSでシェアした際のタイトル・画像が正しいか
フォーム動作	お問い合わせフォームの送信・受信テスト
microCMS連携	コンテンツ更新→自動反映が正しく動作するか
404ページ	存在しないURLにアクセスした際のエラーページ

イメージ図（数値はサンプル）データ — Next.js + microCMSで構築したサイトのPageSpeedスコア

費用と期間のリアルな目安

制作費用の相場

Next.js + microCMSの企業サイトを外注した場合の費用目安です。

サイト規模	費用目安	期間
5ページ（小規模）	80万〜150万円	1〜1.5ヶ月
10ページ（中規模）	150万〜300万円	1.5〜2.5ヶ月
15ページ以上（大規模）	300万〜500万円	2〜4ヶ月

WordPressと比較すると2〜3倍の費用がかかります。この差は、テンプレートを使わずにすべてをプログラミングで構築する工数の違いです。

月額運用費の内訳

項目	費用
Vercel（ホスティング）	約2,600円/月（Pro $20）
microCMS	0〜4,900円/月
保守・メンテナンス	5,000〜15,000円/月
合計	約7,600〜22,500円/月