microCMSとNext.jsでブログ作ってみた

microCMSという国産ヘッドレスCMSとNext.jsを使ってブログサイトを構築してみようと思いました。

こちらを参考にしながら進めました。
[Next.js+Vercel+microCMS] microCMS と Next.js でブログを作る

※現在はSDKが提供されているとのことで再編集版が投稿されてました。
なので、今(2021/12時点)から始めるにはこちらのほうがいいかもしれません
microCMS と Next.js でブログを作る（SDK 版）

microCMS

登録

公式ページを参考にいい感じに登録します。

API

API登録する際にリスト形式かオブジェクト形式が選択できます。
とりあえず以下の様なAPIを生やしました。

リスト形式

blogs: 記事一覧
portfolios: 何か作って公開したもの一覧
tags: 記事に付与するタグ一覧

オブジェクト形式

profile: プロフィール
sitedata: サイト情報、多分headに入れる

Next.js

前述の記事を参考にしてcliでnextアプリを生成します。
公式ページのこの辺を読んでおけば大体OK。
今回はブログなのでSSGのみ使います。
なので基本的な作業としては以下となります。

各ページコンポーネントでgetStaticProps関数を定義しexportする
必要なデータ、ここではmicroCMSのAPIで取得した結果をpropsにセットする
Pageコンポーネントに↑のpropsが渡されるのでそれらをいい感じにrenderする

aspida

microCMS
のデータを取得する際のAPIに型をつけるためにaspidaというHTTPクライアントを導入します。

pathpida

ついでにリンクについても型をつけられるpathpidaというaspidaの親戚みたいなものがあるのでそれを導入しました。
こちらについては先程のブログ記事には無いのでgithub上のpathpidaを参考に。
基本的に設定は不要でnext/nuxt両方に対応してくれているようです。
下記コマンドをpackage.jsonに追加し実行すると、pages配下の構造に応じたメソッドを定義したファイル(lib/$path.ts or utils/$path.ts)が生成されます。

    "dev:path": "pathpida --watch",

生成されたファイルを各ページコンポーネントにimportして使います。

import { pagesPath } from '@/utils/$path'

pagesPath.profile.$url()

デプロイ

github x vercel連携

github x vercelを連携しgithubにpushしたらビルドが走るようにしておきます

microCMS x vercel連携

同じくmicroCMSのコンテンツを追加・更新した時もビルドが走るようにしたい。
microCMSからvercelへwebhookする設定があるのでする。webhook飛ばすタイミングは色々と設定できる。
注意点としてはwebhookの設定はAPI単位なので、全てのコンテンツ追加・更新のタイミングでビルドしたい定義したい場合はそれぞれのAPIで設定しなければならなそう。

これで一旦作成完了しました。
プレビュー機能はスキップしたのと、OGPだとか細かい設定はできてないので後々やる予定です。

レイアウト調整

完了..と思ってビルド結果をみたらコンテンツ部分にスタイルがあたってなかったので修正。
microCMS + TailwindCSSでのHTMLコンテンツに対するスタイル適用を参考に対応していく。
tailwindlabs/tailwindcss-typographyを使う。

A plugin that provides a set of prose classes you can use to add beautiful typographic defaults to any vanilla HTML you don't control (like HTML rendered from Markdown, or pulled from a CMS).

MarkdownとかCMSからレンダリングしたHTMLにスタイルを当ててくれますと。
コンテンツ流し込んでる要素のclassにproseを追記する。

直った。OK。