本記事は、MicroCMS × Next.js × Vercelを使って無料で小規模Webサイトを構築した際の学習記録です。  

初心者向けの参考書をベースに、実際に開発しながら得られたTipsや、環境の違いによる注意点などを整理しました。 

• 1. この本で学べる内容
• 2. 開発環境の設定
• 3. 覚えておきたいTips
• 4. Vercelデプロイでの注意  
• 5. Hubspot の補足メモ
• 6. 学習を終えての感想

学習のきっかけ

「モダン」というより、いまや主流となっている技術を使ってWebサイトを作りたい。  

Next.jsを触ってみたものの、サイトに必要な機能をどう実装すればよいか分からない。

始められずにモヤモヤする日々が続いていたところ、この本を見つけて一気に開発が進み始めることになりました。

👉 「Next.js＋ヘッドレスCMSではじめる！ かんたんモダンWebサイト制作入門」

初心者にも取り組みやすいデザイン・構成で、まさに欲しかった内容が詰まっていました。即購入でした。  

この本で学べる内容

Next.jsを使って以下のようなことが体系的に学べました。

• 数ページ規模のWebサイト開発  
• 全ページ共通パーツの作成と読み込み  
• 最適化された画像の利用  
• 状態監視を利用したアニメーション  
• Google Analyticsの設定  
• ヘッドレスCMS（MicroCMS）での記事投稿・管理  
• MicroCMSとNext.jsの連携  
• 投稿更新時の自動デプロイ（Vercel連携）  
• Next.jsバージョン13以降のApp Routerを使った開発方法  

実装できる機能

このような機能が備わったサイトが出来上がります。

• Not Found ページ  
• 問い合わせページ（Hubspot DB保存付き）  
• キーワード検索  
• ページネーション  
• カテゴリ、投稿一覧ページ  
• API連携による下書きプレビュー  
• キャッシュによる高速化  
• ベーシック認証  
• サイトマップ生成  

開発環境の設定

バージョンの確認方法

Node.js、Git、VSCodeの設定は済んでいたので、バージョン確認だけ行いました。

brew list | grep node → node が出た
brew list | grep git → git が出た
which node → /opt/homebrew/bin/node
which git → /opt/homebrew/bin/git
command -v nvm → 反応なし

• Node.js：node -v　v22.2.0（Homebrew経由）
• Git：git -v　2.45.1

Nodeはバージョンが異なっても自動補完し、エラーになることを防いでくれているみたいですね。

実務でもバージョンが自分の環境と違っても困ったことがないのでつい見落としがちですが、
案件ごとにバージョン切り替えるように管理すべきですよね。

Next.js プロジェクト作成

書籍ではバージョン14.1.xを利用していますが、
最新バージョンで試すため、以下のコマンドを実行します。

npx create-next-app@latest my-next-project

セットアップ中に追加で

「Would you like to use Turbopack for next dev? › No / Yes」

と聞かれるのは最新版の特徴らしく、今回は「Yes」を選択。

この時点で以下の点が書籍と異なると気づきました。

• next.config.ts（本は next.config.mjs）
• eslint.config.mjs（本は eslintrc.json）

自分はつまづかなかったけれど、インストールでエラーになる時の対処も載っており、助かります。

ここからは、書籍を一通り完了したことによる感想とメモになります。

覚えておきたいTips

MicroCMSの仕組みやAPI連携用パッケージの利用方法などがわかりやすく解説してくれていました。

個人的に、覚えていたら便利だなというものをリストにしてみました。

• Local Images：<Image> に width/height を書かなくてもOK
• not-found.tsx：Next.jsが、存在しないページ用テンプレートを自動で表示してくれる
• layout.tsx の継承：app/members/layout.tsx を配置すると上位layoutを継承したうえで上書きされる
• classnames パッケージ：state（状態）に応じたCSSスタイルが簡単に切り替えられる
• 基本はサーバーコンポーネント：Next.jsのAppRouterでは、ユーザー操作が不要ならサーバー側に寄せる
• MicroCMS API形式：複数コンテンツ → リスト形式、単一 → オブジェクト形式を選択しコンテンツを登録していく
• Microcms-js-sdk：microCMS が提供している公式のソフトウェア開発キット。API を JavaScript（ブラウザやNode.js、Next.jsなど）から簡単に呼び出せる。
• APIプレビュー：MicroCMS管理画面からレスポンス内容を簡単に確認できる

Vercelデプロイでの注意 

Chapter8までは問題なく進んでいたのに、Vercel デプロイができない事件が発生。

ローカルでは動くのに、なぜ？と調査した結果、

Vercel上では Propsの型定義 が原因でエラーになってしまいました。

参考書のコードはNext.jsが最新バージョンでは型エラーになることが判明し、

Propsをすべて修正するのは大変なので、書籍と同じバージョンに落として解決しました。

Hubspot の補足メモ

書籍の画面と実際の管理画面構成が異なっていたため、検索ボックスから「フォーム」を探し、旧フォームエディタを選択することで書籍通りの画面を再現できました。

学習を終えての感想

最初は本当にこんなに充実したサイトが、この本の通りできるのだろうか？と半信半疑でしたが、

本当にできました。私でも。

Typescriptの型に慣れていないため苦労する面はあったけれど、ChatGPTに聞きながら勉強していくことで理解が深まりました。

Node/Git/VSCode関連の解説はもっと省いて、その分TypeScriptの型補足があると嬉しかったなあと思います。

とはいえ、Webサイト制作に必要な機能が一通り網羅され、実際にどう構築していくのかが掴めたのは大きな収穫でした。

MicroCMS × Next.js × Vercel で小規模サイトを体系的に学びたい方には、とてもおすすめの一冊です。

いずれ、MicroCMSの代わりにWordpressをヘッドレスCMSとして作り変えてみたいなと新たな目標ができました。