microCMS、Next.js、Vercelを使用したブログについて

はじめに

エンジニアである上で少しでも技術発信したいというのと、QiitaやZennなどのプラットフォームでもよかったのですがReactやTailwindCSSを触ってみたいというのがあったので、学習がてら自作ブログを作成しました。
自作ブログだとメモ程度の記事でも、全然有益でなくても気にせずアップできるのがいい点ですね!
飽きたらプラットフォームに転記します笑

microCMS

microCMSは株式会社microCMSが開発しているヘッドレス CMSです。
ヘッドレスCMSとは、その名の通り、CMSのヘッドの部分がないCMSです。ここでいうヘッドとはビューの部分、つまりCSSや見た目の部分について定められていないCMSのことです。
このヘッドレスCMSを使用するメリットとしては、

  • マルチデバイスに対応できる
  • サイトの編集が柔軟にできる

等が挙げられます。自由度が高いのが一番のメリットです。
デメリットとしては、

  • APIのスキーマ設定などは非エンジニアには難しい
  • 導入のための技術習得コストがかかる

等があります。現在ではNext.jsなどを利用すると導入記事も多く、上記のデメリットも解消できます!
ちなみにmicroCMSは国産のヘッドレスCMSとしても有名です。

Jamstack

Jamstackとは、JamstackのJamはJavaScript/APIs/Markupの頭文字です。
Jamstackは静的コンテンツを配信するだけなので動作が高速です。
また、動的コンテンツデータはデータが更新されたタイミングで都度ビルドデプロイを行うので静的コンテンツ表示の表示最適化のメリットを享受できます。
仕組みなどはこちらの記事がわかりやすいです⇒Jamstackって何なの?何がいいの? - Qiita

Next.js

Next.jsはVercelによって作られたReactのフレームワークです。SSR/SSGに対応していることが特徴の一つです。

Vercel

Vercelは、Vercel社が開発している静的サイト・Jamstackサイト向けのプラットフォームです。
Githubやbitbiucket等のGitサービスと連携すれば、プッシュするたびに最適化された組み込みのCI/CDプロセスが可能になります。
また、
ブログ記事作成についてはmicroCMS + Next.jsでJamstackブログを作ってみよう
の記事がとてもわかりやすいです。(自分も気分次第ですがチュートリアル記事をあげるかもしれないですw)

参考記事

microCMS + Next.js + Vercelのチュートリアルをやってみた - necco note | necco inc.
ヘッドレスCMSとは何か?従来CMSとの違いやメリデメを解説!
Jamstackって何なの?何がいいの? - Qiita