<p>WordPressでサイトを運用していると、「管理画面は慣れているのに表示が重い」「プラグイン更新が怖い」「ヘッドレスにしたいが手順が分からない」といった悩みが出てきます。特に企業サイトやポートフォリオでは、見た目の更新頻度より<strong>表示速度と運用の安心感</strong>が成果に直結します。</p><p>この記事では、フリーランスのWebディレクター兼エンジニアとして、実際にWordPress（CSR）運用から<strong>Next.js × microCMS × Vercel</strong>へ移行した手順を、そのまま再現できる形で解説します。APIの作り方、データ取得、ISR、画像、死活チェックまで、現場で事故りやすい点も含めて書いています。</p><p>読み終えるころには、「何をどの順で作るか」「どこをmicroCMSに任せ、どこをNext.jsで処理するか」が判断できるようになります。</p><h2 id="ha27a6c98db">なぜ今、Next.js × microCMSが実務で選ばれるのか</h2><p>結論から言うと、<strong>表示はNext.js、更新はmicroCMS、配信はVercel</strong>に分けると、制作側と運用側の両方の負荷が下がります。</p><h3 id="h7587e85607">SEOと速度を同時に取りにいける</h3><p>従来のWordPressをCSR（クライアント側でAPIを叩く）で出すと、初回表示が遅く、クローラーにも不利です。Next.jsのSSG / ISRなら、ページはあらかじめHTMLとして生成され、更新後も再生成できます。</p><ul><li>Core Web Vitalsを改善しやすい</li><li>記事URLを静的に出せるので、インデックスされやすい</li><li>APIキーをブラウザに出さなくてよい</li></ul><h3 id="hb25f9df064">クライアントが「更新しやすい」</h3><p>microCMSは管理画面が軽く、フィールドを先に設計すれば、担当者はタイトル・本文・画像を入れるだけです。WordPressのようにテーマやプラグインの都合で画面が壊れる、ということが起きにくいです。</p><blockquote><p>実務では「エンジニアが触らなくても更新できること」が、継続案件になるかどうかを分けます。CMS選定は技術趣味ではなく、運用設計です。</p></blockquote><h3 id="h29342fca37">構成の役割分担</h3><table><tbody><tr><th colspan="1" rowspan="1"><p>役割</p></th><th colspan="1" rowspan="1"><p>使うもの</p></th><th colspan="1" rowspan="1"><p>理由</p></th></tr><tr><td colspan="1" rowspan="1"><p>表示・ルーティング</p></td><td colspan="1" rowspan="1"><p>Next.js</p></td><td colspan="1" rowspan="1"><p>SSG/ISR、画像最適化、リダイレクト</p></td></tr><tr><td colspan="1" rowspan="1"><p>記事・実績データ</p></td><td colspan="1" rowspan="1"><p>microCMS</p></td><td colspan="1" rowspan="1"><p>非エンジニアでも更新できる</p></td></tr><tr><td colspan="1" rowspan="1"><p>ホスティング</p></td><td colspan="1" rowspan="1"><p>Vercel</p></td><td colspan="1" rowspan="1"><p>Git連携、ISR、next/imageのCDNキャッシュ</p></td></tr></tbody></table><h2 id="h896dcd77de">事前に決めておくこと（ここを飛ばすと後で作り直す）</h2><p>コードを書く前に、APIの形を先に決めます。後からフィールド名を変えると、fetchもページも全部巻き戻ります。</p><h3 id="h1813265a15">ブログ用API</h3><ul><li><code>blogs</code>（リスト形式）: <code>title</code> / <code>content</code> / <code>eyecatch</code> / <code>category</code></li><li><code>categories</code>（リスト形式）: <code>name</code></li></ul><p>公式のブログテンプレートで十分です。<code>slug</code>が無くても、コンテンツIDをURLに使えます。きれいなURLが必要なら、後から<code>slug</code>フィールドを足せばよいです。</p><h3 id="hea33be5342">制作実績のURL一覧</h3><p>詳細ページが不要なら、リストAPIは作らず<strong>オブジェクト形式</strong>で十分です。繰り返しフィールドにURLだけ入れ、キャプチャ画像は表示時に生成します。</p><ul><li>API名: <code>results</code>（オブジェクト形式）</li><li>繰り返し: <code>resultslist</code></li><li>中身: <code>url</code>（テキスト）</li></ul><blockquote><p>以前はスプレッドシートのURLからPuppeteerでキャプチャし、サーバーに保存していました。Vercelではデプロイのたびにファイルが消えるので、この方式は使えません。Webhookで画像を書き戻すのも工数が重いです。実務では「URLだけ保存して、表示時にキャプチャAPIへ流す」が一番軽いです。</p></blockquote><h2 id="h868447cfa4">構築手順</h2><h3 id="h147b3742dd">1. プロジェクトを用意する</h3><pre><code class="language-bash">pnpm create next-app@latest my-site --typescript --app --eslint --tailwind
cd my-site
pnpm add microcms-js-sdk</code></pre><p><code>.env.local</code> にキーを置きます。Gitにコミットしないでください。</p><div data-filename=".env.local"><pre><code class="language-bash">MICROCMS_SERVICE_DOMAIN=your-service
MICROCMS_API_KEY=your-api-key</code></pre></div><h3 id="h3bfb07f45d">2. microCMSクライアントを共通化する</h3><p>ページごとに<code>createClient</code>を書くと、環境変数チェックが漏れます。必ず1箇所にまとめます。</p><div data-filename="lib/microcms.ts"><pre><code class="language-typescript">import { createClient } from &quot;microcms-js-sdk&quot;;

function getClient() {
  const serviceDomain = process.env.MICROCMS_SERVICE_DOMAIN;
  const apiKey = process.env.MICROCMS_API_KEY;

  if (!serviceDomain || !apiKey) {
    throw new Error(
      &quot;MICROCMS_SERVICE_DOMAIN と MICROCMS_API_KEY を設定してください&quot;
    );
  }

  return createClient({ serviceDomain, apiKey });
}

export type Blog = {
  id: string;
  title: string;
  content: string;
  eyecatch?: { url: string; width?: number; height?: number };
  category?: { id: string; name: string };
};

export async function getBlogs() {
  const data = await getClient().getList&lt;Blog&gt;({
    endpoint: &quot;blogs&quot;,
    queries: { limit: 10, orders: &quot;-publishedAt&quot; },
  });

  return data;
}

export async function getBlog(id: string) {
  return getClient().getListDetail&lt;Blog&gt;({
    endpoint: &quot;blogs&quot;,
    contentId: id,
  });
}</code></pre></div><h3 id="h3d247901d3">3. 一覧と詳細をISRで出す</h3><p>App Routerでは、<code>revalidate</code>を付けるだけでISRになります。APIキーはサーバー側に残るので、ブラウザに漏れません。</p><div data-filename="app/page.tsx"><pre><code class="language-tsx">import Link from &quot;next/link&quot;;
import { getBlogs } from &quot;@/lib/microcms&quot;;

export const revalidate = 60;

export default async function HomePage() {
  const { contents } = await getBlogs();

  return (
    &lt;main&gt;
      &lt;h1&gt;Blog&lt;/h1&gt;
      &lt;ul&gt;
        {contents.map((post) =&gt; (
          &lt;li key={post.id}&gt;
            &lt;Link href={`/posts/${post.id}`}&gt;{post.title}&lt;/Link&gt;
          &lt;/li&gt;
        ))}
      &lt;/ul&gt;
    &lt;/main&gt;
  );
}</code></pre></div><div data-filename="app/posts/[id]/page.tsx"><pre><code class="language-tsx">import { notFound } from &quot;next/navigation&quot;;
import { getBlog, getBlogs } from &quot;@/lib/microcms&quot;;

export const revalidate = 60;

export async function generateStaticParams() {
  const { contents } = await getBlogs();
  return contents.map((post) =&gt; ({ id: post.id }));
}

export default async function PostPage({
  params,
}: {
  params: Promise&lt;{ id: string }&gt;;
}) {
  const { id } = await params;
  const post = await getBlog(id).catch(() =&gt; null);

  if (!post) notFound();

  return (
    &lt;article&gt;
      &lt;h1&gt;{post.title}&lt;/h1&gt;
      &lt;div dangerouslySetInnerHTML={{ __html: post.content }} /&gt;
    &lt;/article&gt;
  );
}</code></pre></div><p>本文はリッチエディタのHTMLなので、<code>dangerouslySetInnerHTML</code>を使います。microCMS側で変なスクリプトは入りませんが、<strong>自分でiframeやカスタムHTMLを許可している場合はXSSに注意</strong>してください。</p><h3 id="h68ec847e3c">4. 画像は next/image に載せる</h3><p>microCMSの画像ドメインを許可しないと、ビルドまたは実行時に落ちます。</p><div data-filename="next.config.ts"><pre><code class="language-typescript">import type { NextConfig } from &quot;next&quot;;

const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: &quot;https&quot;,
        hostname: &quot;images.microcms-assets.io&quot;,
      },
      {
        protocol: &quot;https&quot;,
        hostname: &quot;image.thum.io&quot;,
      },
    ],
    minimumCacheTTL: 60 * 60 * 24 * 7,
  },
};

export default nextConfig;</code></pre></div><h2 id="h5c78174a22">制作実績は「URLだけ」で回す</h2><p>実績一覧で外部サイトのサムネイルが欲しい場合、画像を手で上げる必要はありません。microCMSにはURLだけ入れ、描画時にキャプチャサービスのURLを組み立てます。</p><div data-filename="lib/capture.ts"><pre><code class="language-typescript">const DEFAULT_CAPTURE_URL =
  &quot;https://image.thum.io/get/width/1200/noanimate/{url}&quot;;

export function getCaptureImageUrl(targetUrl: string) {
  const template = process.env.CAPTURE_IMAGE_URL || DEFAULT_CAPTURE_URL;
  return template.replaceAll(&quot;{url}&quot;, encodeURIComponent(targetUrl));
}</code></pre></div><pre><code class="language-typescript">function normalizeWebsiteUrl(url: string) {
  if (/^https?:\/\//i.test(url)) return url;
  return `https://${url}`;
}</code></pre><p>初回だけキャプチャ生成で遅く、2回目以降はVercelの<code>next/image</code>がCDNにキャッシュします。Webhookで画像を書き戻すより、運用が圧倒的に軽いです。</p><h3 id="h86964ec7a1">404やドメイン消滅は表示前にスキップする</h3><p>公開が終わったサイトを一覧に残すと、キャプチャもリンクも壊れます。ISRのタイミングで生存確認し、死んでいるURLは表示だけ外します。microCMSのエントリは消さなくて大丈夫です。</p><pre><code class="language-typescript">const SKIP_STATUSES = new Set([404, 410]);

export async function isActiveWebsite(url: string) {
  const controller = new AbortController();
  const timeoutId = setTimeout(() =&gt; controller.abort(), 8000);

  try {
    let response = await fetch(url, {
      method: &quot;HEAD&quot;,
      redirect: &quot;follow&quot;,
      signal: controller.signal,
    });

    if (response.status === 405 || response.status === 501) {
      response = await fetch(url, {
        method: &quot;GET&quot;,
        redirect: &quot;follow&quot;,
        signal: controller.signal,
      });
    }

    return !SKIP_STATUSES.has(response.status);
  } catch {
    return false;
  } finally {
    clearTimeout(timeoutId);
  }
}</code></pre><p>403は「サイトはあるが拒否された」なので残します。5xxも一時障害の可能性があるので、いきなり消さない方が安全です。</p><h2 id="ha189ba8ca9">現場でハマりがちなポイント</h2><h3 id="h3f9bd656e7">API名の単数・複数を揃える</h3><p>管理画面では「blog」と呼びたくなりますが、エンドポイントが<code>blogs</code>ならコードも<code>blogs</code>です。オブジェクト形式の<code>results</code>に対して<code>getList</code>を叩くと、ビルドが落ちます。URL一覧は<code>get()</code>、記事一覧は<code>getList()</code>です。</p><h3 id="h93aeb9ca60">スキーム無しURL</h3><p><code>example.com</code> のように <code>https://</code> が無い値は、fetchもキャプチャも失敗します。入稿時に揃えるか、取得時に補完してください。</p><h3 id="h4451378d46">プレビューは後回しにしない</h3><p>公開前確認が無いと、クライアントが「保存したのにサイトに出ない」と混乱します。microCMSのプレビューは<code>draftKey</code>をクエリで受け取り、下書きを取得します。ISRの公開キャッシュと混ぜないこと。</p><pre><code class="language-typescript">export async function getBlogPreview(id: string, draftKey: string) {
  const client = createClient({
    serviceDomain: process.env.MICROCMS_SERVICE_DOMAIN!,
    apiKey: process.env.MICROCMS_API_KEY!,
  });

  return client.getListDetail({
    endpoint: &quot;blogs&quot;,
    contentId: id,
    queries: { draftKey },
  });
}</code></pre><h3 id="h3713256524">静的エクスポートのままVercelに上げない</h3><p><code>output: &quot;export&quot;</code> はレンタルサーバー向けです。VercelでISRやリダイレクトを使うなら外します。<code>distDir: &quot;out&quot;</code>も同様です。</p><h3 id="h5abba423f3">Root Directoryを間違えない</h3><p>GitHubリポジトリのルートに<code>package.json</code>があるなら、VercelのRoot Directoryは空です。ローカルで親フォルダの下に置いていても、リポジトリがその中身だけなら<code>nextjs</code>にはしません。</p><h2 id="h219980e653">開発・公開で使うツール</h2><p>この構成を実務で回すなら、ホスティングは<strong>Vercel</strong>が第一選択です。Git連携、プレビューデプロイ、ISR、<code>next/image</code>のキャッシュまで一 loc で揃います。レンタルサーバーに静的書き出しするより、更新のたびにFTPする必要がありません。</p><p>実装面では、<strong>Cursor</strong>のようなAIコーディング環境と、Vercel公式プラグインを入れておくと、デプロイ設定や環境変数の漏れに早く気づけます。ただし、APIキーはチャットに貼らず、<code>.env.local</code>とVercelのEnvironment Variablesだけに置いてください。</p><ul><li>Vercel: プレビューURLをクライアント確認に使える</li><li>Cursor: 既存コードに合わせた修正が速い</li><li>microCMS: 記事と実績URLの更新を非エンジニアに渡せる</li></ul><h2 id="h5a0c599f11">公開前チェックリスト</h2><ul><li>microCMSに <code>blogs</code> / <code>categories</code> / <code>results</code> がある</li><li>Vercelに <code>MICROCMS_SERVICE_DOMAIN</code> と <code>MICROCMS_API_KEY</code> がある</li><li><code>.env.example</code> に本番キーを書いていない</li><li><code>public</code> のロゴやフレーム画像がリポジトリに入っている</li><li>使っていないPuppeteerを依存から外している（Vercelのインストールが落ちやすい）</li><li>旧URLが必要な場合は <code>redirects</code> を書いている</li></ul><h2 id="h71364b4e3d">サイトのモダン化・構築のご相談</h2><p>WordPressからの移行、Next.js × microCMSの新規構築、表示速度の改善まで、設計から実装まで一貫して対応しています。「CMSは担当者に渡したいが、サイトは速くしたい」という場合は特に相性が良いです。</p><p>ご相談は、<a href="/contact/">ご相談・お問い合わせフォーム</a>からお気軽にお問い合わせください。要件が固まっていなくても、現状の構成を見たうえで移行手順を整理するところからお手伝いできます。</p>

Archives - Page 3

【実務レベル】Next.js × microCMSで爆速サイトを構築する完全手順｜Webディレクター兼エンジニアが解説

Categories