ブログを GatsbyJS から microCMS + Next.js に移行しました
GatsbyJS から Next.js へとブログシステムを作り直しました。
GatsbyJS から Next.js へ
GatsbyJS は Easy であり、 Next.js は Simple であるフレームワークであると感じました。
GatsbyJS は簡単に静的サイトを生成できるフレームワークです。定型的な利用方法であれば GatsbyJS は静的サイト生成をものすごく簡単にしてくれます。 GraphQL を使用したデータクエリはとても快適で、一度習得してしまえばサクサクと開発ができます。プラグインも一通り揃っているので迷うことも少ないと思います。しかし、使用するプラグインはブラックボックスとなっていることが多く、ちょっと踏み込んだことをしようとすると途端に難しくなります。プラグインを自身でフォークして改造したり、プラグイン自体を自分で作るなどしないと厳しいことが多いです。また、公式プラグインでも依存関係がそれほど更新されることがありません。 npm install した際に「脆弱性がある」と表示されるのはなかなかモヤモヤするといったこともあります。 静的サイトジェネレータであるため、一度ビルドしてしまえば脆弱性は関係ない という話もあり、確かにと思う部分もありますが...
一方 Next.js はフロントエンドフレームワークとしては薄く作られておりシンプルであるため、自分でコードを書く量が増えますが、より自由自在に機能を実装できるといった長所があります。フレームワークに依存している部分が少ないため、ちょっと凝ったことをしようとした場合でも思った通りに機能を実装できます。 GatsbyJS のプラグインのようなシステムはありませんが、それすなわち自身で機能を実装できるということになります。ゆえに依存関係に悩むことも少なくなります。
データソース
以前の GatsbyJS ブログで、記事は GitHub のプライベートリポジトリで管理していましたが、今回はヘッドレス CMS である microCMS を利用して管理するようにしました。 Git より簡単に管理できますし、画面プレビューもサクッとできます (まだ未実装ではありますが) 。また、文字数制限がゆるく、既存の長い記事でも問題なく投稿できました。また、 microCMS の画像サーバーは imgix が導入されているため、最適な画像を簡単にクエリできるといった長所もあります。 Next.js で画像の扱いは少々面倒で、最適な画像を配信するためには自前で API を用意するか imgix などの CDN を用意する必要があります。 microCMS は imgix が組み込まれているため、何も考えることなく配信の最適化ができます。
ヘッドレス CMS として microCMS ではなく Contentful も検討しましたが、いかなるプランでも Long Text の文字数制限が 50000 文字 であり少なすぎるため、今回は採用を見送りました。 Rich Text だともっと長い記事を入力できるのですが、 Next.js で Markdown を処理したいので使いませんでした。通常の記事であれば全然採用に値すると思います。 そもそもダラダラ長い記事を書かずに短く纏めろという話
スタイル
Sass (SCSS) を使用していましたが、今回は Tailwind CSS を使用しました。ガッツリ凝った LP などの場合はスタイルシートを直接書いたほうが良い場合もありますが、ブログのようなシンプルな構造のサイトには Tailwind CSS でサクッと書けて快適です。
デプロイ先
今まではブログをビルドして Amazon S3 にアップロード、 Amazon CloudFront で配信をしていましたが、 Next.js 採用ということで Vercel にデプロイすることにしました。 AWS から変更してどれだけ遅くなるか気になっていましたが、普通に Vercel が爆速でびっくりしました。 もう全部こいつでいいんじゃないかな
おわり
まだまだ実験中ですので、色々と仕様が変わるかもしれません。ブログのソースコードは以下に push してあります。 Pull Request も随時お待ちしております。