Back to Top

Next.js と Hygraph でブログを作った

Cover image

技術構成

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
  • ページネーション
  • サイト内検索