bolt.newで始める爆速Jamstackブログ制作（Next.js+microCMS）
bolt.newというフルスタックの生成 AI を使って爆速で Jamstack ブログを作ろうという記事です。
bolt.new が何なのかは別で書いているのでこちらを御覧ください
目標
Next.js と microCMS を使って Jamstack ブログを作り、Netlify にデプロイするまでが今回の記事の目標です。
スタイリングには TailwindCSS（ShadCN）を使います。
完成物
ソースコード
Jamstack ブログの制作
まずは生成
まず最初に bolt.new に対して「Jamstack 記事を作成してください」という指示をします
パッと思いつく必要なページと、カテゴリは microCMS から渡されるよ～という注意点も書いておきました
するとサクサクとコードが生成されていきます
あっという間にコードが出来上がって、早速出来上がったもののプレビューが表示されました
デザインもシンプルな感じで作ってくれています（リッチなデザインと指定したはずなんですけどね…）
でもちゃんとここまでデザインができるのはすごいです
ちなみに、返信が英語で来ているんですが、「日本語で返信してください」と言えばちゃんと日本語で返信してくれるようになります。（今回は忘れてしまったので英語で返されてます）
エラーの修正
ただ、上の画像の左下に Potential problem detected と表示されてしまっています
どこかでエラーが発生しているということですね
中身を見てみるとこんな感じのエラーみたいです
見たことないタイプのエラーだし、どうやって修正すればわからない…
でも心配ありません、ここにある Fix problems ボタンを押すだけで勝手にエラーを修正してくれます！
するとこんな感じで「直したよ！」って感じで返してくれました
どこをどう直したのかというのもちゃんと教えてくれます
microCMS との接続
そういえばプレビュー画面で記事が表示されていましたが、まだ microCMS と接続していないのになんでブログ記事やカテゴリが表示されているんだろう…と思ってコードを見てみると記事の中身がハードコーディングされていました
microCMS 使って！って最初に言ったはずなんですが、指示の仕方が悪かったんでしょうか？
とにかく、microCMS から記事を取得してほしいので、「microCMS から記事を取得する処理を追加して！」と指示してみます
するとあっという間に記事を取得するためのコードを書いてくれました
この getPostById というのが記事を取得するための関数みたいです
getPostById の実際の処理はこんな感じ
ちゃんと microCMS の SDK を使って記事を取得する処理を書いていますね
エンドポイント名などは特に指定していなかったので、bolt.new 側で適当な名前をつけてくれています
.local.env に API キーと serviceDomain を書いてプレビュー画面を見てみると…
無事書いた記事を取得して一覧表示することができました
記事詳細画面も表示できています
ちゃっかりダークモードにも対応しています
Netlify へのデプロイ
デプロイは簡単で、右上の Deploy ボタン、または「デプロイして」と指示するだけでデプロイすることが可能です
そうすると、Netlify にデプロイした URL とデプロイしたプロジェクトを自分のアカウントに追加するための URL が渡されます
環境変数を追加したり、CI/CD の設定がしたかったらデプロイしたプロジェクトを自分のアカウントに追加しましょう
そうして出来上がったのがこちらになります
今回作成したコードはダウンロードして GitHub の方にアップロードしています
さいごに
今回解説はしていませんが microCMS 側の作業やコードの修正作業などもいくつか行っています
ただ、大体のコードについては生成されたものをそのまま使用しています
気になった部分やデザインを追加してほしいときなど、頼んだらすぐに対応してくれるので非常に便利なツールだと感じました
ChatGPT とか Claude に文章の作成依頼をするような感じでサイトの制作ができるのは感動を覚えます
これから先の個人開発は bolt.new でベースを作ってから残りをちまちまと GitHub Copilot や Cursor などで手直ししていくような手法が主流になるのかもしれませんね
Discussion