Next.js, microCMS, Chakra UIという組み合わせでブログを作るチュートリアルです。
このブログ自体はNuxt.jsで動かしているのですが、Next.jsも触ってみたくなり、試しに作ってみました。
まだまだ不慣れなところが多いので、備忘を兼ねて。
完成イメージ
一覧ページは画像等はなしで、シンプルな構成にしました。
記事詳細はmicroCMSのリッチエディタを使って、マークダウン形式で書けます。
Chakra UIを使用すると、ダークモードの実装が簡単にできます、かっこいいですね。
機能一覧
このチュートリアルでは主に以下の機能を実装しました。
- ダークモード切替
- マークダウンレンダリング
- ページング処理
- タグでの絞り込みに応じたページング処理
- パンくずリスト
記事一覧
ソースコード
https://github.com/qlitre/nextjs-microcms-chakra-blog-template
Share