Qlitre's Blog

2022.07.17 Next.js /microCMS /まとめ

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

Next.js, microCMS, Chakra UIという組み合わせでブログを作るチュートリアルです。
このブログ自体はNuxt.jsで動かしているのですが、Next.jsも触ってみたくなり、試しに作ってみました。
まだまだ不慣れなところが多いので、備忘を兼ねて。

完成イメージ

一覧ページは画像等はなしで、シンプルな構成にしました。




記事詳細はmicroCMSのリッチエディタを使って、マークダウン形式で書けます。
Chakra UIを使用すると、ダークモードの実装が簡単にできます、かっこいいですね。



機能一覧

このチュートリアルでは主に以下の機能を実装しました。

  • ダークモード切替
  • マークダウンレンダリング
  • ページング処理
  • タグでの絞り込みに応じたページング処理
  • パンくずリスト


記事一覧


ソースコード

https://github.com/qlitre/nextjs-microcms-chakra-blog-template