microCMSブログのNext.js版を作成した

commits4 min read読了の目安(約3600字

はじめに

microCMS 様が自社ブログのソースコードを github にあげてくださっています。

https://github.com/wantainc/microcms-blog
https://blog.microcms.io/

本家 microCMS 様のブログは Nuxt.js×Netlify という構成です。
最近は Next.js×Vercel という構成をよく見るため、せっかくなので勉強がてら Next.js×Vercel 構成のブログを頑張って作ってみました。
デモサイト →
ソースコード →

microCMS とは

microCMS はクラウド型のヘッドレス CMS です。
コンテンツ管理のためのサーバ管理は一切不要で、サインアップするだけですぐにサービスを利用開始できます。

詳しくは、下記リンクをチェック

https://blog.microcms.io/getting-started/

方針

デザイン、コンポーネント、コンテンツ、機能は microCMS ブログとほぼ同様のものにする。

技術構成

  • Next.js (SSG + SSR)
  • TypeScript
  • CSS Modules
  • microCMS (コンテンツ)
  • Vercel (Hosting, API)

機能の比較

microCMS ブログと同じ機能にしようと頑張りましたが、すべての機能を作成しませんでした。
差分で赤くなっている項目は今回は含めていません。

記事一覧
カテゴリー別記事一覧
人気の記事一覧
最新の記事一覧
検索
パンくずリスト
記事詳細
目次
著者
SNSシェアボタン
- 下書きプレビュー
関連記事
- サイトマップ
- バナー
- Google Analytics
- RSS
- PWA

microCMS の API スキーマ設定

ブログ

endpoint: blog
type: リスト形式

フィールド ID 表示名 種類
title タイトル テキストフィールド
category カテゴリー コンテンツ参照 - カテゴリー
toc_visible 目次 真偽値
body 本文 リッチエディタ
description 概要 テキストフィールド
ogimage OGP 画像 画像
writer 著者 コンテンツ参照 - 著者
partner パートナー コンテンツ参照 - パートナー
related_blogs 関連記事 複数コンテンツ参照 - ブログ

著者

endpoint: authors
type: リスト形式

フィールド ID 表示名 種類
name 名前 テキストフィールド
text 自己紹介 テキストエリア
image 画像 画像

カテゴリー

endpoint: categories
type: リスト形式

フィールド ID 表示名 種類
name 名前 テキストフィールド

パートナー

endpoint: partners
type: リスト形式

フィールド ID 表示名 種類
company 会社名 テキストフィールド
url 会社 URL テキストフィールド
description 説明文 テキストエリア
logo ロゴ 画像

人気の記事

endpoint: popular-articles
type: オブジェクト形式

フィールド ID 表示名 種類
articles 人気の記事 複数コンテンツ参照 - ブログ

バナー

endpoint: banner
type: オブジェクト形式

フィールド ID 表示名 種類
image 画像 画像
url リンク先 URL テキストフィールド
alt 代替テキスト テキストフィールド

コンテンツ更新時の自動ビルド設定

SSG にしているので、再ビルドしないと最新のコンテンツが更新されません。
なので、microCMS のコンテンツ更新時に Vercel の自動ビルドされるようにします。

Vercel 側の設定

Settings タブ -> Git -> Deploy Hooks にHook Nameとデプロイ対象のGIt Branch Nameを入力する。
その後生成される URL をコピーする。

microCMS 側の設定

対象の API を選択し、「API 設定」に遷移。
WebHook -> カスタム通知 を選択。
Webhook の名前、上記でコピーした URL、通知タイミングを選択し、設定ボタンを押下。

追加していきたいこと

  • 下書きプレビュー
  • Google Analytics
  • RSS

最後に

間違ってる点や改善点が多々あると思いますが、ご活用いただければ幸いです。

https://github.com/wattanx/microcms-blog-with-next
https://microcms-blog-with-next-wattanx.vercel.app/