Next.js と Hygraph でブログを作った
技術構成
- Frontend: Next.js + Tailwind CSS
- CMS: Hygraph
- Data fetch: graphql-request
- Markdown renderer: next-mdx-remote
Next.js + Tailwind CSS
静的サイト生成をするときにほぼ鉄板のフレームワークとなりつつある Next.js を選びました。Nuxt や SvelteKit も一応候補には入れましたが、独自のテンプレート構文の存在が気に入らず、やはり全て JavaScript で完結している React が一番書き心地がいいです。
UIフレームワークについては問答無用で Tailwind CSS を選択。Tailwind UI ですぐ使えるコンポーネントがいくつか用意されているのと、デザイン初心者の自分にとっては Refactoring UI を読んですぐ実行に移そうと思うと Tailwind CSS のシステムに乗っかるのが一番と判断しました。
Hygraph + graphql-request
ブログ記事のヘッドレス CMS として Hygraph (旧 GraphCMS) を選択。データの Read/Write が GraphQL で行えるのと、UIがこなれていて使いやすいのが特徴です。
簡単な記事を書くだけだったらローカルに Markdown ファイルを管理すればいいのですが、フロントマターのメタデータにタグを入れて many-to-many の関係が出来上がっただけでも容易に実装が複雑化して面倒になったので CMS に頼ることにしました。 Hygraph からのデータ取得はビルド時だけなので、一番軽量な GraphQL クライアントの graphql-request で十分です。
next-mdx-remote
Hashicorp が OSS として公開している、Next.js 用の MDX 処理ライブラリです。MDX は Markdown を拡張したものなので単純な Markdown にも使えます。
getStaticProps
内でビルド時に Markdown 処理を行い、ブラウザ側では処理結果をレンダリングするだけです。Next.js で Markdown コンテンツを描画するときは
getStaticProps
内で Markdown を HTML に変換し、React コンポーネントにdangerouslySetInnerHtml={{ __html: html }}
で埋め込むreact-markdown
ライブラリを使用してブラウザで Markdown 処理をする
の2択があると思います。今回のように単純なブログを書くだけだったら前者の選択でもいいと思います。後者はブラウザの JS バンドルサイズが不必要に肥大化する(+40 kb~)のでお見送り。
今後実装したいもの
- Next.js Preview Mode で Hygraph の下書きを表示
- Table of Contents
- ページネーション
- サイト内検索