はじめに#

あけましておめでとうございます！ HTMLでちょこちょこアップデートしてきた個人WEBサイトを、 勉強も兼ねてNext.jsとChakra UIで書き直しました。 元々JavaScriptやTypeScriptに苦手意識があり、なかなか手を付けられなかったですが、 まあ、年も明けましたし帰省してもクソ暇なので暇つぶしがてら挑戦してみました。

microCMS#

これまでのサイトにブログページを新設しました。 ブログはほかのページよりも更新が多く、ページ自体も増えそうで管理が面倒だなと思っていたところにmicroCMSというAPIベースの日本製のヘッドレスCMSを見つけました。 これを使えばNext.js側は動的なページを1つ作っておくだけでOK。 記事を追加したいときはmicroCMSの管理画面からということで管理も楽で即採用しました。 webhookにも対応しているのもありがたいですね。

microCMS｜APIベースの日本製ヘッドレスCMS

microCMSはAPIベースの日本製のヘッドレスCMSです。もう社内向け編集/管理画面を自作する必要はありません。開発・運用コストを大きく下げることでビジネスを加速させます。

microcms.io

Chakra UI#

React用のUIコンポーネントライブラリです。スタイルがコンポーネント化されていてUIに一貫性を持たせやすくしたライブラリになっています。今までCSSでゴリゴリ書いていたスタイルがタグ指定だけで実現できるのは驚きでした。

Chakra UI

Simple, Modular & Accessible UI Components for your React Applications

chakra-ui.com

Vercel#

WEBホスティングサービスでは定番らしいです。Githubリポジトリと連携させて変更があれば自動でデプロイが走り常に最新状態のページが表示できるようになります。 自分はmicroCMSのwebhookとも連携させて、記事を追加した際にもデプロイが走るように設定しました。

vercel.com

vercel.com

おわりに#

まだ、道半ばで使いこなせている感は全くないですが今後も勉強して少しずつサイトをアップデートできたらなと思います。

参考にさせて頂いたありがたい記事#

【まとめ】Next.js, microCMS, Chakra UIで作るブログ | Qlitre

Next.js, microCMS, Chakra UIで作るブログシリーズのまとめページです。

qlitre-weblog.com

microCMS + Next.jsでJamstackブログを作ってみよう

本記事はmicroCMSとNext.jsを組み合わせてJamstackブログを構築するチュートリアルです。microCMSでAPIを作成し、Next.jsでデータを取得して静的なブログページを生成する方法、Vercelを用いたデプロイと、Webhookによる自動ビルド設定などを紹介しています。初心者でも取り組みやすくなるよう具体的なコード例も記載していますので、是非参考にしてみてください。

blog.microcms.io