Megu

Next.jsとChakraUIとmicroCMSを使ってブログを3日間で作った話

2022.02.19

Next.js

Chakra UI

microCMS

日頃から楽しく見させてい頂いている「プログラミングをするパンダ」さんの記事で以下のような記事がありました。

個人ブログを Gatsby から Next.js に移行したので記事を書きました！https://t.co/V7hT52rKFs
— プログラミングをするパンダ@Beer Break 開発中🍺 (@Panda_Program) February 2, 2022

同じような悩みを旧ブログに感じていたので、いっそのこと自分も新しくしようと本ブログを作成しました。
※ブログを作るのに使ったツール・パッケージ等

- NextJS
- TypeScript
- ChakraUI
- Vercel
- microCMS
- cheerio
- date-fns
- highlight.js
- React Icons
- SWR

旧ブログの問題点

Gatsbyそんなに詳しくなかった問題

旧ブログはGatsby+NetlifyCMSの構成で作っていました。テンプレートを元に構築したのでかなりの短時間で作りました。（1Hとか）
しかし、技術的には内部の事を理解しておらず追加で機能開発を行うハードルが高くなっていました。
作った当時は、数年前でSSG?GraphQL?といった具合で...。なんかいい感じで動くブログを作りたかったのだと思います。
感じた問題点としては、自分が作ったものでは無いので愛着が全く無い点→機能拡張のモチベーションがなくなる点にありました。

良くも悪くもテンプレート問題

旧ブログはテンプレートベースで作っていました。そのため、ある程度のデザインが当てられています。
少しの調整程度であれば、良いのですが。世界観が変わるほどの調整をした際に変更を加えないといけない箇所が目白押しでした。
これならば、一旦作り直してもいいかなと。

かかった時間

実際にかかった時間は、概算でこれくらいです。

・環境周り構築：1H
・ブログ開発時間：20H
・本番データ登録：2H

少し時間はかかりました。
初めて使うmicroCMSとの接続周りや装飾周りで苦戦しました...
ただ開発体自体はスムーズでストレスなく作ることができました。

ストレスフリーポイント①：Next.js with Vercel環境

最近のフロントではNext.js + Vercelが多いと聞き試してみました。とてもスムーズな開発体験。
シンプルなUIで初めて触るにしても問題なく公開まで行けました。knowledgeも多いので調査もはかどります。

ストレスフリーポイント②：Chakra UIの導入

TailwindCSSと迷いましたがシンプルな見た目のサイトを作る予定だったのである程度機能的でコンポーネントベースで使い回せるChakraUIを選択。
これが良かった...!本当に...!
CSSの命名や設計を考えずにレスポンシブ対応までをスピーディに開発出来ました。
もう、みんなこれで良いんじゃないかな...wおすすめです。

ストレスフリーポイント③：microCMSの導入

まだまだ発展途上のサービスでContentfulなどと比較するとできることや無料枠などに制限はあるものの、日本人が使いやすいような設計になっている管理画面が最高です。
全日本語対応でかなりシンプルなUIのためちょっと触れば全体像を把握することが出来ます。
API同士をうまく組み合わせれば様々な使い方も出来、個人利用、法人利用ともに活用しやすいかなと思います。
旧ブログではmarkdownで管理していました。
エンジニアとしてはmd管理は楽な面が多く重宝していたのですが、スマホから投稿できる、調整できるようにしたいと考えたときにHTML形式の方が良いかなと考えていまいした。
その点、microCMSはHTML形式で出力されるテキストエディタが内蔵されているので便利でした。

ストレスフリーポイント④：Grid!Grid!!Grid!!!

最後は、Gridレイアウトを活用するです。
これまでFlexレイアウトを使うことが多かったのですがレスポンシブ対応をしたり、レイアウトをスピーディに開発する際に少し面倒を感じていました。
しかし、最近は色々なサービスでIEのサポート終了が発表され、メジャーのブラウザでもサポートされているGrid。
レイアウトを柔軟に変更できるため拡張性を持って開発ができます！

Repository

拙いコードですが、リポジトリはこちらになります。
https://github.com/niiharamegumu/MegumuMe