Next.js + microCMS でJamstackなブログを作ってみた
はじめに
はじめまして！宮﨑と申します！
普段は人材系事業会社のWebエンジニアとして、サイトの保守・運用などを担当しています。
日々学んだ技術や知識をアウトプットするためにプロフィールサイト兼ブログを作成してみました。
これからJamstack構成や Next.js + microCMS での開発を考えている方の参考になれば幸いです。
Miyazaki's profile
宮﨑貴大のプロフィールサイトです。
my-profile-mu-gold.vercel.app
Jamstackとは？
JavaScript API Markup の頭文字を取ったもので、JavaScriptとAPIとMarkupを組み合わせたWebアプリケーションアーキテクチャです。
Jamstackの特徴としてパフォーマンスの高さとセキュリティの高さがうたわれています。
microCMSを選んだ理由
microCMSはAPIベースのヘッドレスCMSです。コンテンツ管理の手間をなるべく減らしたいのと同時に、以下のようなメリットがあるため使用しました、
- ノーコードでスキーマ作成できる
- 日本語ドキュメントが充実
- API連携がシンプル
- 高速なレスポンス
microCMS｜APIベースの日本製ヘッドレスCMS
microCMSはAPIベースの日本製のヘッドレスCMSです。もう社内向け編集/管理画面を自作する必要はありません。開発・運用コストを大きく下げることでビジネスを加速させます。
microcms.io
サイト構成について
今回作成したサイトでは、以下の内容でJamstack構成にしました。
使用技術
- フロント：Next.js（React/TypeScript）
- デザイン：TailwindCSS、vanilla-extract
- コンテンツ管理：microCMS
- デプロイ：Vercel
コンテンツ
- プロフィール
- ポートフォリオ
- ブログ
- お問い合わせ
システム構成
Vercelでホスティングをしています。
また、Next.js では SSG を採用しており、ビルド時に microCMS から API にて記事データを取得し、静的ファイルを生成するようにしています。そのため、画面遷移時の同期通信などは発生せず、快適な操作性を実現しています。
開発の流れ
前提
プロジェクト立ち上げやmicroCMSの導入は以下の記事を参考に行いました。
具体的な手順などは以下に分かりやすく記載されていますので、気になった方は見てみてください。（雑ですみません...）
今回は、私が行ったことを軸に話していきます！
microCMS + Next.jsでJamstackブログを作ってみよう（Next.js 15 ver.）
microCMSとNext.js 15を組み合わせて、Jamstackなブログを作成するチュートリアルです。
blog.microcms.io
ワイヤーフレームの作成
デザイン素人ながらも頑張って作成してみました。
ツールはFigmaを使用しましたが、これも初めてだったのでUdemyで動画を見て使い方を学びました。作成したワイヤーフレームはあまりにも素人感満載で恥ずかしですが、慣れてくるとデザインを考えるのが意外と楽しかったです。
PC
sp
microCMSの設定
microCMSについても使用するのは初めてでしたが、日本製のCMSということもありドキュメントやチュートリアルが充実していてキャッチアップしやすかったです。
また、構築自体も API作成 → APIスキーマ作成 → 記事を作成 でサクッと構築でき、思っていたより学習コストがなく簡単にできました！
BlogのAPIスキーマ構成
Blogの記事コンテンツ
記事内容は Markdown(MDX) で管理し、ビルド時にhtmlにパースしてページに表示しています。
実装
本サイトは、Next.js の App Router をベースに構築しています。トップページ、ブログ、ポートフォリオといった各セクションは独立したルートとして設計し、共通のレイアウトコンポーネントを用いて一貫性のあるデザインを実現しました。
記事データはビルド時に microCMS から取得し、Next.js の SSG（静的生成）で HTML に変換されるように実装。これにより、通信の待ち時間なく、高速なページ表示を実現しています。
CMSとの連携もシンプルで、必要な情報だけを API 経由で取得し、構造化されたデータとして扱えるのも便利でした。
また、スタイルは TailwindCSS を基本としつつ、カラーや余白、タイポグラフィなど共通スタイルは vanilla-extract で定義。見た目とコードの整合性を保ちながら、保守性の高いスタイリングを目指しました。
Vercelへデプロイ
デプロイには Vercel を使用しましたが、本当に驚くほど簡単で感動しました。
まず GitHub にプロジェクトを push し、Vercel 側の管理画面で GitHub リポジトリと連携。あとはビルドコマンドや出力ディレクトリ（Next.js プロジェクトの場合は自動で設定される）を確認するだけで、初回デプロイが完了します。
本サイトでは SSG（静的生成）を前提とした構成としているため、 Next.js の generateStaticParams 関数を用いて、ビルド時に microCMS から記事やプロフィールなどのデータを取得しています。
これにより、各ページは静的HTMLとして生成され、ページ遷移時のデータ取得が不要になり、動的な通信を最小限に抑えたパフォーマンス重視の設計になっています。
まとめ
今回の制作を通じて、Jamstack構成でのWebサイト開発の楽しさと難しさの両方を実感することができました。特に、Next.jsのApp Routerを使った設計や、microCMSとの連携による柔軟なコンテンツ管理は、学びも多くとても良い経験になりました。
また、構成を意識しながら一つのサイトを自分の手で形にしていく中で、開発全体の流れを俯瞰して考える力も身についたと感じています。
まだまだ改善点はありますが、自分の活動を発信できるベースとして、今後もアップデートを続けていく予定です。
最後に
今後はカテゴリ機能や記事の並び替え、目次のハイライト表示など、さらに使いやすいブログにしていきたいと思っています。
また、VercelだけでなくAWSを使ったデプロイにも挑戦し、インフラ面の知識も深めていく予定です。
ここまで読んでいただきありがとうございました！
本記事が、Next.js や microCMS を使った開発に取り組む方の参考になれば嬉しいです。
なお、本サイトのソースコードは以下で公開していますので、よければ覗いてみてください！
GitHub - miyazaki-dev01/My_profile: プロフィールサイト（React[Next.js]/TypeScript）
プロフィールサイト（React[Next.js]/TypeScript）. Contribute to miyazaki-dev01/My_profile development by creating an account on GitHub.
github.com