MimiCatLab の作り方 — Next.js + microCMS で技術ブログを構築した

はじめに

MimiCatLab は「つまづいたことや学んだことを記録する」をテーマにした技術ブログです。この記事では、サイト自体をどのように作ったかを紹介します。

技術スタック

• Next.js 16（App Router）— ページルーティング・静的生成
• TypeScript — 型安全な開発
• Tailwind CSS v4 — スタイリング
• microCMS — ヘッドレス CMS（記事の管理・配信）
• Firebase — Dev Log ページのパスワード認証

静的サイトとして配信

Next.js の output: "export" を使い、ビルド時にすべてのページを静的な HTML として出力しています。これにより、サーバーレスの環境にそのまま配置できます。

静的エクスポートには制約もあり、たとえばページネーションの実装では generateStaticParams が空配列を返せないという制限に対応する必要がありました。

microCMS でコンテンツ管理

記事は microCMS で管理しています。microcms-js-sdk を使ってビルド時に記事データを取得し、静的ページとして生成します。

const data = await client.get({
  endpoint: "posts",
  queries: {
    limit: 10,
    offset: 0,
    orders: "-publishedAt",
  },
});

主な機能

• ダークモード — OS 設定に追従
• 記事検索 — クライアントサイドで全文検索
• タグ・アーカイブ — タグ別・年月別の記事一覧
• ページネーション — 10 件ごとに /p/2、/p/3... でページ分割
• Dev Log — Firebase 認証でパスワード保護した開発メモ

おわりに

シンプルな構成でありながら、静的エクスポートの制約と向き合いながら必要な機能を実装していきました。このブログ自体が一つの学習記録になっています。