【ソースコード公開】Next.js, Chakra UI, microCMS でJamstackなブログを開発しました

Next.js、Chakra UI 、microCMS、TypeScriptを使って本ブログを作成したのできっかけと概要について書いています。

Published: 25 July, 2023
Revised: 29 July, 2023

ソースコード

以下で公開しています。Next.js(version: 13, App Router), Chakra UI, microCMS を使って個人ブログを作りたい、という方にとって以下のソースコードが参考になれば幸いです。

https://github.com/tkugimot/nextjs-microcms-blog-handson

実装した機能

ホーム(記事一覧ページ)
記事詳細ページ
ライトモード/ダークモード切り替え
多言語対応(日本語と英語)
タグ

実装しなかった機能

ページング
検索

個人的にページングが見辛くてあまり好きではないですし、microCMSからは100件取るようにしていますし、SSGなのでそれほど重くなることもないでしょうし、少なくとも最初から実装する必要はないかなと思いました。90件記事を書くような時期がきたら実装しようかなと思います。

検索については最初は実装していたのですがこれもパフォーマンス的にイマイチですし、ブログ内の記事が少ない内は不要かなと思いました。

技術スタック

項目	技術	選んだ理由
フレームワーク	Next.js (version: 13, App Router)	仕事で使っていた。ドキュメントが充実している。
CMS (Contents Management System)	microCMS	ドキュメントが充実している。広告の導入が可能。日本企業を応援したい。
ホスティングサービス	Netlify	使い方が簡単。広告の導入が可能。
言語	TypeScript	型を使って安全に開発したい。
UIライブラリ	Chakra UI	UIライブラリを使って楽したい。ドキュメントが充実している。
ドメイン	Xserver Domain	営業メールが全然来ない。
ソースコード管理	GitHub	他を使う理由がない。

※ microCMSはまだ日本語でのサポートがメインですが、管理画面は英語でも利用できるようです。

構成

簡単ですがこんな感じの構成になっています。

すみません、図で上手く表現できていませんが、Userからのアクセスの際にはmicroCMSまでリクエストは届かず、build時に静的なコンテンツを生成しています。

Next.jsのappのソースコードをGitHubのmainブランチに反映した時、またはmicroCMSのコンテンツを更新した際に、Netfliy側でbuild -> deployまで走ります。

上記の図を生成した PlantUML のソースコードを一応置いておきます。

@startuml
actor User as user

cloud Internet {
 rectangle Browser as browser
 rectangle DNS_Server as dns
 cloud Netlify {
   rectangle Next.js as app
 }
 rectangle microCMS as microcms
 note bottom: SSG(Get contents during the build process)
 rectangle GitHub as github
}


user -right-> browser
browser -down-> dns
dns -up-> browser
browser -right-> app
app -left-> browser
browser -left-> user
app -down-> microcms
microcms -left-> app
app -down-> github
github -up-> app
@enduml

本ブログ開設にかかった費用

1円。zubora-code.netのドメイン代のみ。

本ブログを開発したきっかけ

「SOFT SKILLS ソフトウェア開発者の人生マニュアル第2版」を読んで、ちゃんと発信しようという気持ちにさせられました。詳しくは以下に書評を書いてますのでもし興味があればご一読ください。

https://zubora-code.net/ja/articles/bookreview_softskills

最後に

本当は本ブログの開発過程を詳細に本ブログに記録してハンズオン形式のチュートリアルを書こうと思っていたのですが、段々と雑になって質の低い記事になってしまいそうだったので、もう少し時間が取れる時に丁寧に書きたいと思います。

Zubora Code