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