2025年8月4日 / 最終更新日 : 2025年8月4日 fujifuji コラム[PR]

【2025年最新】Next.js × microCMSで本格ブログサイトを構築する完全ガイド

 

はじめに

モダンなブログサイトを構築したいけれど、WordPressでは物足りない。そんな方におすすめなのが、Next.js × microCMSの組み合わせです。microCMSとNext.jsを組み合わせて、Jamstackなブログを作成することができるこの構成は、高速で安全、かつSEOに強いブログサイトを実現できます。

本記事では、Next.js 15の最新機能（App Router）を使用して、microCMSと連携したブログサイトの構築方法を詳しく解説します。

なぜNext.js × microCMSなのか？

1. 高速なパフォーマンス

Next.jsの静的サイト生成機能により、サイトが重くなることもありません。ビルド時にAPIからデータを取得してHTML化するため、表示速度が劇的に向上します。

2. 優れたセキュリティ

フロントエンドとバックエンドが完全に分離されているということになります。つまり、フロントとバックが一体になっている「WordPress」に比べてセキュリティ面では優れている

3. 簡単なコンテンツ管理

microCMSのAPIを活用することで、投稿の作成や編集、削除を簡単に行えるため、すぐに運用を始めることが可能です

4. 開発効率の向上

microCMSは非常に簡単に環境構築、API作成が行えて、びっくりしましたという開発者の声が多く、短期間でのサイト構築が可能です。

必要な前提知識

  • HTML、CSS、JavaScriptの基礎知識
  • React.jsの基本的な理解
  • Node.jsの環境構築経験

技術スタック

  • フロントエンド: Next.js 15 (App Router)
  • CMS: microCMS
  • スタイリング: Tailwind CSS
  • デプロイ: Vercel
  • 言語: TypeScript

環境構築

1. Node.jsのインストール

Node.jsが18以上が推奨ですので、公式サイトから最新のLTS版をインストールしてください。

2. Next.jsプロジェクトの作成

pnpm を指定してNext.jsの新規プロジェクトを作成します

npx create-next-app@latest my-blog --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"

プロジェクト作成時の設定は以下を推奨：

  • TypeScript: Yes
  • ESLint: Yes
  • Tailwind CSS: Yes
  • App Router: Yes
  • src/ directory: Yes

3. 必要なパッケージのインストール

npm install microcms-js-sdk dayjs
npm install -D @types/node

microCMSの設定

1. アカウント登録とサービス作成

  1. microCMS公式サイトでアカウント登録
  2. 「microCMSへようこそ」画面が表示されるので「はじめる」ボタンを押下し、サービスを作成画面へ移動
  3. サービス名を入力してサービスを作成

2. APIの作成

カテゴリAPIの作成

microCMSでカテゴリー、ブログの順に2つのAPIを作成していきます

  1. 「API作成」→「1から作成」を選択
  2. API名: categories、エンドポイント: categories
  3. リスト形式を選択
  4. フィールド追加:
    • カテゴリー名（テキストフィールド）

ブログAPIの作成

  1. 「API作成」→「テンプレートから選択」→「ブログ」
  2. API名: blog、エンドポイント: blog
  3. 自動的にブログ用のスキーマが作成されます

ブログのAPIではタイトル、内容、アイキャッチ画像、カテゴリの4つのスキーマが作成されています

3. コンテンツの投稿

「カテゴリー名」にテキストを入力し、右上の［公開］ボタンをクリックします。いくつか登録しておきましょう

同様に、ブログ記事も数件投稿しておきます。

Next.jsアプリケーションの実装

1. 環境変数の設定

プロジェクトルートに .env.local ファイルを作成：

MICROCMS_API_KEY=your-api-key
MICROCMS_SERVICE_DOMAIN=your-service-domain

2. microCMSクライアントの設定

src/libs/microcms.ts を作成：

import { createClient } from 'microcms-js-sdk';

export type Blog = {
  id: string;
  title: string;
  body: string;
  eyecatch?: {
    url: string;
    height: number;
    width: number;
  };
  category: Category;
  publishedAt: string;
  updatedAt: string;
};

export type Category = {
  id: string;
  name: string;
};

if (!process.env.MICROCMS_SERVICE_DOMAIN) {
  throw new Error('MICROCMS_SERVICE_DOMAIN is required');
}

if (!process.env.MICROCMS_API_KEY) {
  throw new Error('MICROCMS_API_KEY is required');
}

export const client = createClient({
  serviceDomain: process.env.MICROCMS_SERVICE_DOMAIN,
  apiKey: process.env.MICROCMS_API_KEY,
});

3. ブログ一覧ページの実装

src/app/page.tsx:

import { client, Blog } from '@/libs/microcms';
import Link from 'next/link';
import Image from 'next/image';

export default async function Home() {
  const { contents } = await client.getList<Blog>({
    endpoint: 'blog',
  });

  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-8">Latest Posts</h1>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {contents.map((post) => (
          <article key={post.id} className="border rounded-lg overflow-hidden shadow-lg">
            {post.eyecatch && (
              <Image
                src={post.eyecatch.url}
                alt={post.title}
                width={post.eyecatch.width}
                height={post.eyecatch.height}
                className="w-full h-48 object-cover"
              />
            )}
            <div className="p-4">
              <h2 className="text-xl font-semibold mb-2">
                <Link href={`/blog/${post.id}`} className="hover:text-blue-600">
                  {post.title}
                </Link>
              </h2>
              <p className="text-gray-600 text-sm">
                {new Date(post.publishedAt).toLocaleDateString()}
              </p>
              <span className="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded mt-2">
                {post.category.name}
              </span>
            </div>
          </article>
        ))}
      </div>
    </div>
  );
}

4. ブログ詳細ページの実装

下図のような階層で、app/blog/[id]/page.tsxを作成します

src/app/blog/[id]/page.tsx:

import { client, Blog } from '@/libs/microcms';
import Image from 'next/image';
import { notFound } from 'next/navigation';

type Props = {
  params: { id: string };
};

export default async function BlogPost({ params }: Props) {
  try {
    const post = await client.get<Blog>({
      endpoint: 'blog',
      contentId: params.id,
    });

    return (
      <article className="container mx-auto px-4 py-8 max-w-4xl">
        <h1 className="text-4xl font-bold mb-4">{post.title}</h1>
        <div className="mb-6">
          <time className="text-gray-600">
            {new Date(post.publishedAt).toLocaleDateString()}
          </time>
          <span className="ml-4 bg-blue-100 text-blue-800 text-sm px-3 py-1 rounded">
            {post.category.name}
          </span>
        </div>
        {post.eyecatch && (
          <Image
            src={post.eyecatch.url}
            alt={post.title}
            width={post.eyecatch.width}
            height={post.eyecatch.height}
            className="w-full h-64 object-cover rounded-lg mb-8"
          />
        )}
        <div
          className="prose max-w-none"
          dangerouslySetInnerHTML={{ __html: post.body }}
        />
      </article>
    );
  } catch (error) {
    notFound();
  }
}

export async function generateStaticParams() {
  const { contents } = await client.getList<Blog>({
    endpoint: 'blog',
  });

  return contents.map((post) => ({ id: post.id }));
}

自動デプロイの設定

1. Vercelへのデプロイ

  1. GitHubにプロジェクトをプッシュ
  2. Vercelでプロジェクトをインポート
  3. 環境変数を設定

2. Webhookの設定

Webhookを使って記事が更新されると自動でビルドが実行されるように設定します

Vercel側の設定：

  1. Settings → Git → Deploy Hooks
  2. Hook Name: microCMS
  3. Branch: main
  4. URLをコピー

microCMS側の設定：

  1. API設定 → Webhook
  2. Vercelを選択
  3. コピーしたURLを設定

これで、「microCMS」を更新した際にビルドが走り、サイトの更新が可能になります

パフォーマンス最適化

1. 画像最適化

Next.jsのImageコンポーネントを使用することで、自動的に画像最適化が適用されます。

2. 静的生成の活用

App Routerでは、generateStaticParamsを使用して静的ページを生成できます。

3. キャッシュ戦略

export const revalidate = 3600; // 1時間ごとに再生成

SEO対策

1. メタデータの設定

export async function generateMetadata({ params }: Props) {
  const post = await client.get<Blog>({
    endpoint: 'blog',
    contentId: params.id,
  });

  return {
    title: post.title,
    description: post.body.substring(0, 120),
    openGraph: {
      title: post.title,
      description: post.body.substring(0, 120),
      images: post.eyecatch ? [post.eyecatch.url] : [],
    },
  };
}

2. 構造化データの追加

JSON-LDを使用して記事の構造化データを追加することで、検索エンジンでの表示が改善されます。

よくある問題と解決策

1. 画像が表示されない

next.config.jsでmicroCMSのドメインを許可してください：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: ['images.microcms-assets.io'],
  },
};

module.exports = nextConfig;

2. TypeScriptエラー

型定義を正確に行い、必要に応じて!演算子を使用してください。

まとめ

Next.js × microCMSの組み合わせは、モダンで高性能なブログサイトを構築するための最適な選択肢です。

主なメリット：

  • 高速なページ表示
  • 優れたSEO性能
  • 簡単なコンテンツ管理
  • 自動デプロイ機能
  • 優れたセキュリティ

Next.jsの認証機能やデータベースが不要なので、複雑なバックエンド開発に悩むことなく、シンプルで高速なブログが構築できます

この記事で紹介した手順に従えば、プロフェッショナルなブログサイトを短時間で構築できるでしょう。ぜひチャレンジしてみてください！

参考リンク

本記事の内容は2025年8月時点の情報に基づいています。

■プロンプトだけでオリジナルアプリを開発・公開してみた！！

プロンプトだけでオリジナルアプリを開発・公開してみた！！

■AI時代の第一歩！「AI駆動開発コース」はじめました！

テックジム東京本校で先行開始。

AI駆動開発/生成AIエンジニアコース（初心者向け）

■テックジム東京本校

「武田塾」のプログラミング版といえば「テックジム」。
講義動画なし、教科書なし。「進捗管理とコーチング」で効率学習。
より早く、より安く、しかも対面型のプログラミングスクールです。

テックジム東京本校

＜短期講習＞5日で5万円の「Pythonミニキャンプ」開催中。

独学もオンラインも無理だから、有給とって「Pythonミニキャンプ」へ【5日間で5万円】

＜月1開催＞放送作家による映像ディレクター養成講座

現役放送作家が教える動画講座！『ＤＯＧＡ』

＜オンライン無料＞ゼロから始めるPython爆速講座

ゼロから始めるPython爆速講座（理系・プログラミング初心者向け）

プログラミング学習に関するお役立ちコンテンツ

カテゴリー
コラム[PR]
コラム[PR]

前の記事

Python環境変数の設定と取得方法完全ガイド｜Windows・Mac・Linux対応
2025年8月3日
コラム[PR]

次の記事

【2025年版】WEBアプリで使えるビープ音の種類一覧 – HTML5・JavaScript対応音源集
2025年8月4日