ChatGPT-4o と MicroCMS + Vercel + Next.js でブログをつくった
投稿日: 2025-05-05
カテゴリ: tech
個人ブログを ChatGPT-4o に相談しながら、MicroCMS（記事管理）+ Vercel（デプロイ）+ Next.js の構成でつくってみた。
基本的に GPT とやりとりするだけで進められたが、いくつか詰まった点もあった。
1. GitHub に Private リポジトリを作成
- GitHub アカウントを新規作成
- 「Private」でリポジトリを作成（個人開発なので非公開で十分）
つまづきポイント：
- Git 操作に慣れておらず、最初 git push 時に「パスワード認証が廃止されている」エラーに遭遇。
- → Personal Access Token を発行して解決。
2. Node.js インストールしてローカル開発環境準備
- Node.js をインストール（Mac）
- ターミナルで node -v npm -v で確認
- プロジェクト用のフォルダを作成
つまづきポイント：
- npm のグローバルインストール時に EACCES エラー発生
- → 権限周りの問題だったので sudo で解決。
3. Next.js プロジェクトの作成
- npx create-next-app@latest を実行してプロジェクトを作成
- TypeScript + App Router 構成を選択
- localhost:3000 で表示確認
つまづきポイント：
- npm error could not determine executable to run → tailwindcss のコマンドが動かず、先に依存パッケージを明示的にインストールして回避。
4. GitHub にコードを Push
- git remote add origin でリポジトリ接続
- git push origin main でアップロード
つまづきポイント：
- GitHub上にすでに存在する README.md と競合
- → git pull --rebase や git commit --amend で解決
5. MicroCMS で記事データを管理できるようにする
- APIスキーマを作成（title, content, eyecatch, category など）
- APIキーとサービスドメインを .env.local に設定
- microcms-js-sdk を使ってデータ取得
つまづきポイント：
- Next.js 15 の影響で params の型が合わず Vercel ビルドが失敗。
- → params: Promise<{ slug: string }> にし、await params で受け取るよう修正して解決。
6. Vercel にデプロイ
- GitHub と連携してリポジトリをインポート
- Environment Variables セクションに MICROCMS_API_KEY と MICROCMS_SERVICE_DOMAIN を設定
- main ブランチに push すると自動でビルド & デプロイ
つまづきポイント：
- ビルドエラー時にコミット情報が不足していたため user.name と user.email を設定。
- また、古いコミットが使われていたのでキャッシュクリアして再デプロイ。
7. Tailwind CSS でスタイル調整
- @tailwindcss/typography を導入して記事本文に prose クラスを適用
- prose-sm を使って文字サイズを小さめに調整
- アイキャッチ画像・投稿日・カテゴリ表示を追加
- トップページや前後記事へのナビゲーションリンクも追加
つまづきポイント：
- 外部画像が next/image で表示できず
- → next.config.js に images.microcms-assets.io を許可して解決。
なお、ここまでは ChatGPT のアプリ使っていたが、これ以降は AI 活用・ターミナル含めて Cursor ベースで進めるように移行。