Next.js + microCMS + VercelでJamstackなブログ付き個人サイトを作る

Next.js

妻の歌人としてのブログ付き個人サイトをリリースしたので、技術的な観点をまとめておきたい。

Jamstack

これがサイトの構成図で*1、最近流行りのJamstackというアーキテクチャで作ってみた。

Jamstackは、静的サイトジェネレーターを用いてCMS等で管理するコンテンツをビルド時にすべて取得して、ユーザーアクセス前に用意しておいたHTML、CSS、JavaScriptをCDN経由で配信することで、画面遷移が非常に速い優れたパフォーマンスのサイト構築を可能にする。

CMS更新時のWebhook通知で自動デプロイする仕組みを入れることで、開発者がソースコードを触ることなく、サイト編集者で完結したサイト更新を行うことができるため、ビジネスから趣味の活動まで、静的サイト開発・運用の手段として有力な選択肢になるだろう。

  • 静的サイトジェネレーター
    • Next.js, Nuxt.js, Gatsby.js, Hugo, Jekyllç­‰
  • ホスティングサービス
    • Netlify, Vercel, Firebaseç­‰
  • ヘッドレスCMS

Jamstackな構成をサポートする静的サイトジェネレーター、ホスティングサービス、ヘッドレスCMSには様々なサービスが覇を競っている状態で、ググると色々な構成例が出て来るので、サイトの目的や好みに応じてサービスの組み合わせを選ぶと良いだろう。私はNext.js（React）を使ってみたかったのでNext.jsとVercelを採用し、ITに詳しくない妻がサイトを更新するので、CMSには日本製で非開発者にもUIが分かりやすいと評判のmicroCMSを採用した。

Jamstackのメリット

実際にサイト開発、運用を経験して感じたJamstackのメリットについて書きたい。

お手軽ハイパフォーマンス

普通にNext.jsで開発してVercelにデプロイするだけでGoogleのPageSpeed Insightsで99のスコアが出るのはすごい。実際にサイトを触ってみてもページ遷移が非常に速いことが分かるだろう。

非開発者による更新も比較的容易

サイトコンテンツはすべてCMS上でMDX（Reactコンポーネントが使えるMarkdown）形式で管理している。microCMSにはリッチエディタ機能もあるけれど、仕事でリッチエディタを使っていて、想定外のHTMLタグが大量に混入して苦労することが多かったため、敢えてテキストエリアにMDX形式で入力する方式を採用した。

サイト更新者の妻はITにあまり強くないけれど、microCMSの管理画面を見ながら各APIのコンテンツ構成と、私が作成した初期コンテンツを元にMarkdownの説明を簡単にしたら、microCMS上でサクサクコンテンツ追加できるようになったので、noteやはてなブログのリッチエディタほど直感的に操作できないけれど、非開発者によるコンテンツ更新も比較的容易に行える感触だ。ちなみに妻にMarkdownエディタを紹介したところ面倒臭く感じたようで、microCMSの管理画面のフォーム上で直接更新して、デプロイ結果を見て実際の表示を確認していた*2。趣味のサイトであれば取り敢えずデプロイしてみる雑な運用もアリかなと思う。

開発体験が良好

Next.jsはReactベースのライブラリで、TypeScriptの導入も容易だ。TypeScriptの型チェックの恩恵を受けつつReactでキッチリとコンポーネント化できるフロントエンド開発は、普段仕事でBackbone.jsベースの複雑なSPAを触っていることと比較しても快適で、コーディングのモチベーションを終始高く保てた。Node.jsのライブラリ群も非常に充実している。

Next.jsは今回初めて触ったけれど、簡単なブログサイトを作ってデプロイまで行う公式チュートリアルが非常に易しく書かれているので、学習コストは低く感じた。

Reactの公式ドキュメントも日本語訳があり、分かりやすく丁寧に書かれていて助かる。

サイト制作手順

これから同様の構成で静的サイトを作ってみようという方への参考と自分用のメモのため、サイトリリースまでの手順を書いておきたい。工数的にはほぼ年末年始休暇中の作業でリリースまで持ち込むことができた。

  1. Next.jsのチュートリアルサイトを作成する
  2. GitHubにチュートリアルサイトに名前を付けてリポジトリ作成する
  3. TypeScriptを導入する
  4. ESLint（JavaScript Standard Style）を導入する
  5. CSSライブラリのBulmaを導入する
    • Bootstrapã‚’JSなしでCSSのみにしたような印象のライブラリ
    • 便利なスタイルが色々と用意されていて助かるが、 Bootstrapと同様に影響範囲が広くなるので、仕事で使うには注意が必要だと思った
  6. サイト構成・デザインを妻と相談しつつ決定する
    • ハンバーガメニューではなくフッターで4つのメニューを切り替える
    • トップページで短歌をフェードイン・フェードアウトで切り替えて表示する
    • 白背景に黒字をベースとし、アクセントカラーに緑を採用する
    • その他サイトタイトルやdescriptionなどを決定した
  7. ローカルにコンテンツを用意しつつ、各ページを作成する
    • ヘッダーとフッターはすべてのページに表示する共通コンポーネントとした
  8. ローカルからmicroCMSにコンテンツを移動し、APIでコンテンツを取得する処理を書く
  9. CMSでMDX形式のコンテンツを管理する仕組みを導入する
  10. トップページで短歌がフェードイン・フェードアウトで切り替わる処理を追加する
  11. faviconとOGP画像を設定する
  12. VercelにGitHubリポジトリを連携してデプロイする
    • 環境変数（microCMSのAPIキー）の設定もGUIで簡単に行えた
    • GitHubにpush時の自動デプロイ機能がデフォルトで付いていて驚いた
  13. Vercel管理画面で独自ドメインを取得する
    • 分かりやすいUIでサクッと購入できた*3
    • 購入後自動で独自ドメインにアクセス可能になり、TLS（SSL）の設定まで自動で始まって、約1時間後にTLS設定が完了した
  14. Vercel管理画面でDeploy用URLを取得し、microCMSのWebhook通知先に設定して、CMS更新時の自動デプロイを可能にする
    • Vercelのデプロイ用URLがエラーとなり機能しなかったが、Vercelのサポートに英語で報告したらすぐにバグ修正してくれた
  15. VercelからSlackにデプロイ通知する
    • プライベートでSlackを使っていないため、今回の実運用では採用していないが、仕事で使うならあった方が良いだろう
  16. サイト編集者にCMSの更新方法を案内する

*1:Slackのデプロイ通知については可能なことを確認したのみで、実際の運用は行っていない（プライベートでSlackを利用していないため）。図はDraw.ioを使って描いた。

*2:現状では30秒ほどでデプロイ完了する。

*3:お名前.comとは雲泥の差だ…。