こんにちは、microCMSマーケターの中野です。
前職はエンジニアをやっていたのですが、あらゆるつまずきポイントでつまずいては悩んできました。そんな経験を活かして、初心者エンジニアの方に向けた、microCMSを活用するためのロードマップを考えてみました。

以下のような方を想定しています：

• Next.jsやAstroなどのWebフレームワークをさわったことがなく、チュートリアルを見てもよくわからない
• Node.js環境をセットアップしたことがない
• GitHubでのソースコード管理に不慣れ

ゴール：Next.jsプロジェクトを作成し、microCMSと連携させて、ホスティングサービス（Vercel）へデプロイする

Step 1 : 「microCMSのはじめ方」を実践する

https://blog.microcms.io/getting-started
上記リンクの記事を参考に、以下の手順を実践します。

手順

1. microCMSのアカウント登録
2. サービスの作成
3. APIの作成
4. コンテンツの作成
5. APIからコンテンツを読み込んでブラウザに表示

ねらい

• microCMSのサービス概要を理解する
• サービス作成〜API作成〜コンテンツ作成の流れをつかむ
• APIプレビューを行い、どんなレスポンスが返ってくるかを理解する
• Fetch APIを使って、ブラウザで作成したコンテンツを読み込む

Step 2 : Node.js ＆ Visual Studio Codeのセットアップを行う

https://blog.microcms.io/setup-nodejs-vscode/
上記リンクの記事を参考に、以下の手順を実践します。

手順

1. Node.jsのインストール
2. Visual Studio Code（VSCode）のインストール
3. VSCodeの日本語化

ねらい

• 開発に必要なツールをインストールし、開発環境を整える

Step 3 : microCMSテンプレート「KANTAN! CMS　STARTER for Beginner」を導入する

microCMSにはテンプレートサービスがあります。テンプレートのほとんどはNext.jsなどのWebフレームワークを使用していますが、こちらはHTML/CSSでつくられている、CMS初心者向けのテンプレートです。
（作者のしょうみゆ様、ありがとうございます🙏）

https://templates.microcms.io/templates/detail/de25a5ff-5731-42b0-ac35-6fafdf7ff143

手順

🔽 こちらのページに公開までの手順が詳しく書いてあるので、参考にしていろいろカスタマイズしてみてください。
https://beginner.kantan-cms-starter.com/flow/
※最後の「7.リリース」は「サイトを本番公開する」を参考にしてNetlifyで公開してみましょう。

ねらい

• microCMSテンプレートの導入方法を学ぶ
• GitHubアカウントを登録し、ファイルをDLする
• VSCodeのLive Serverプラグインを使用し、ローカル環境で動作確認を行う
• 設定ファイルでｍicroCMSのサービスID、APIキーを管理する
• Netlifyへデプロイする

Step 4 : microCMSテンプレート「シンプルなコーポレートサイト」を導入する

Next.js（App Router）で実装されているmicroCMSテンプレート「シンプルなコーポレートサイト」を導入してみましょう。

https://templates.microcms.io/templates/detail/d31fd55a-7a23-4b03-9c27-baa753ce75db

手順

🔽 こちらの記事で、microCMSテンプレートの導入方法をステップ・バイ・ステップで説明しておりますので参考にしてみてください。
https://blog.microcms.io/how-to-make-easy-microcms-site/

手順の補足

10.microCMSでコンテンツ追加してみる

この手順まで進んだら、VSCodeでディレクトリ構成や各ファイルをじっくり見てみましょう。
app > _libs > microcms.tsの型定義が、各ページでどのように使用されているのか確認してみましょう。

ねらい

• 画面プレビューの設定
• .envファイルで環境変数を設定する
• 開発コマンドを実行する
• Next.js（App Router）のディレクトリ構成や実装方法を把握する
• Vercelへデプロイする

Step 5 : microCMS + Next.jsでJamstackブログを作成する

microCMSテンプレートは使用せず、自分でNext.jsのプロジェクトとmicroCMSのサービスを作成し、連携してみましょう。

https://blog.microcms.io/microcms-next15-jamstack-blog/
上記リンクの記事を参考に進めてみてください。

ねらい

• Next.jsプロジェクトを作成する
• ブログ用のAPIを作成し、APIスキーマを設定する
• CSS Modulesを使用し、外観を整える
• Webhookを使用し、記事更新時に自動的にビルドが実行されるように設定する

おわりに

無事にゴールを達成できたでしょうか？本記事がmicroCMSを活用するための第一歩となれば幸いです。
microCMSブログのチュートリアル記事などを参考にしながら、さらに実装を進めてみてください！