microCMSとNext.jsでブログを作りました。

動機

これまで、技術的なメモはGitHub Pagesで書いていたのですが、投稿が増えるにつれて、画像などのファイル管理が面倒になってしまいました。

WordPressのようなCMSを使えば、ファイル管理が面倒という問題は解決しますが、どうせならフロント側の実装は自分でやりたいと思って、今回はmicroCMSとNext.jsを使ってブログを作ることにしました。

microCMSというのは、管理画面で書いた記事をレスポンスとして返すAPIを提供してくれるサービスです。日本製らしく、日本語の記事が充実しているのが良かったです。

microCMS + Next.jsでJamstackブログを作ってみよう

この記事で作るブログをベースにして、実装を進めていきました。

やったこと

主にやったことは以下になります。

Vercelへのデプロイ & Webhookの設定
記事へのカテゴリ付け & カテゴリ検索
styled-componentsを使う
記事詳細ページでシンタックスハイライトを行う
動的OGP画像の生成
Google Analyticsの導入
プレビューモードの実装

Vercelへのデプロイ & Webhookの設定

Webhookというのは、アプリケーションの更新状況を他のアプリケーションに伝えるための仕組みで、今回のケースで言うと、microCMSで行った記事の更新をリアルタイムでVercelに伝えるということになります。

今回は、SSGでサイトを生成しており、Webhookがないと、microCMSで記事を更新しても、Vercel側に反映されることはありません。

設定は簡単で、上の記事でも解説されています。

記事へのカテゴリ付け & カテゴリ検索

記事へのカテゴリ付けは上の記事で解説されています。カテゴリ検索は、カテゴリをクリックすると、そのカテゴリの記事一覧が表示されるというものです。

URLは/blog?category=<カテゴリID>のように、クエリパラメータを使うのが妥当な気がしますが、SSGではクエリパラメータを扱うことができないようです。

これは、ビルド時にクエリパラメータの値を知ることができないためです。例えば、ワード検索(指定のワードが含まれる記事一覧を表示する)を考えると、指定されるワードは無限にあります。これが原因で、静的なサイト生成をすることができません。

参考: handling query params for getStaticPaths #11487

仕方がないので、/category/<カテゴリID> をURLとして使用しています。

styled-componentsを使う

CSSはstyled-componentsを使って書いています。styled-componentsを使わずに、オブジェクトの形式でCSSを記述することもできますが、キャメルケースで記述しなければなりません。(ex. text-align → textAlign)

styled-componentsを使うと、初期表示でスタイルが反映されるのが遅くなるという問題がありました。Next.jsにstyled-componentsを導入するで説明されている実装を行うことで、この問題は解決しましたが、根本的な原因は理解できませんでした。

記事詳細ページでシンタックスハイライトを行う

こんな感じでシンタックスハイライトができるようにしました。

const hello = () => {
   console.log('hello');
};

参考にしたのは、next.js+microcmsでシンタックスハイライトの導入です。

サイト生成時に、microCMSから取得した記事のHTMLから、cheerioというHTMLパーサーでコード部分を抜き出して、highlight.jsによってシンタックスハイライトを行うという仕組みです。highlight.jsはソースコードの文字列を与えると、自動で言語を予想して、良い感じにシンタックスハイライトしてくれます。

既に何回か登場していますが、これ も同じ仕組みで、cheerioで該当部分を抜き出して、CSSを付与しています。

動的OGP画像の生成

OGP画像というのは、TwitterでWebページのリンクをツイートする時に出てくるアレです(語彙力)。

OGP画像には記事のタイトルを含めたいです。毎回、画像を手作りするというやり方でもできますが、自動で生成できる方がずっと楽です。

手順は、imgixで動的画像・OGPを作成するを参考にしました。

まず、予め以下のような元となる画像をmicroCMSにアップロードしておきます。

microCMSにアップロードした画像は、クエリパラメータを使って加工することができます。これを使って、記事のタイトルと、元の画像を重ね合わせることによって、OGP画像の出来上がりです。

localhostだとリンクを貼ってもOGP画像が正しく動いているか確認できませんが、Localhost OGP チェッカーというツールを使うことによって、確認することができます。

また、キャッシュの関係上、記事のタイトルを更新したのに、OGP画像が更新されないといったことがあるのですが、Card validator でURLを入力することで、新しいOGP画像が表示できるようになると思います。

Google Analyticsの導入

Google Analyticsを導入してみました。Next.js(TypeScript) に Google Analytics を導入し、PV を計測する方法を参考にしました。

こんな感じでデータを見ることができます。

プレビューモードの実装

microCMSで下書きとして書いた記事が、フロント側でどのように表示されるかを見るためにプレビューモードの実装を行いました。

参考にしたのは、Advanced Features: プレビューモード | Next.js とNext.jsのPreview Mode＋Vercelでプレビュー機能を実現するです。

setPreviewDataというメソッドに、記事のidとdraftKey(下書きのデータにアクセスするためのキー)を引数として渡すことで、idとdraftKeyを含むCookieが生成されます。

Next.jsのgetStaticProps は本来ビルド時に実行されますが、このCookieが含まれている時は、リクエスト時に実行されます。この仕組みによって、CookieからidとdraftKeyを取り出し、microCMSにリクエストを行うことで、下書きのプレビューを行うことができます。上手い仕組みがあるもんだなあと思いました。

感想

フロントエンドの勉強が出来て、良かったです。
せっかく作ったので、更新できるように勉強を頑張ります。

roaris.io

Frontendの記事