Next.jsmicroCMSまとめ

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

公開日:2022-07-17 更新日:2023-06-11

Next.js, microCMS, Chakra UIという組み合わせでブログを作るチュートリアルです。

このブログ自体はNuxt.jsで動かしているのですが、Next.jsも触ってみたくなり、試しに作ってみました。

まだまだ不慣れなところが多いので、備忘を兼ねて。

完成イメージ

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

記事詳細はmicroCMSのリッチエディタを使って、マークダウン形式で書けます。

Chakra UIを使用すると、ダークモードの実装が簡単にできます、かっこいいですね。

機能一覧

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

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

記事一覧

ソースコード

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