対象読者： AIを使ってサイト制作に挑戦しているけどエラーで詰まっている個人事業主・中小企業のWeb担当者
今回やったこと
Sanityで記事を投稿したあと、個別記事ページに移動できないという問題が発生しました。
「続きを読む」ボタンを押してもトップページが表示される。URLだけ変わっているのに、内容はトップページのまま。何度修正しても同じ現象が続きました。
一番詰まった場面
個別ページへの遷移ができない現象が、何度修正しても解決しませんでした。
AIに原因を聞いて修正→再デプロイ→確認→また同じ現象、というループが続きました。内容は全く分かっていないので「早く解決しないかなぁ」と思いながらAIに任せていました（笑）。
最終的な原因は「vercel.json」だった
いくつかの原因候補をひとつずつつぶしていく中で、最終的に判明した原因がこれでした。
// 問題のあったvercel.json
{
"version": 2,
"builds": [
{ "src": "package.json", "use": "@vercel/next" }
]
}
この builds の設定がNext.jsの動的ルーティングを壊していたのです。
以下に書き換えるだけで解決しました：
{
"framework": "nextjs"
}
たった1行の変更でした。
AIだから最初から完璧に答えてくれるわけではない
ここで正直に言います。
AIに任せれば最初から完璧に答えてもらえると思っていたら、イライラしていたかもしれません。
ただ、問題が最初からハッキリしていることばかりではないのは、AIだろうが人間だろうが同じです。考えられる原因をひとつずつつぶしていく必要があります。
今回もいくつかの候補の中から、最後に正解を引いた感じでした。
それでも、vercel.jsonのbuilds設定って何？ というレベルの自分でも解決できたのは、AIのおかげです。AIをきちんと使いこなせれば、非エンジニアでも解決できるということです。
Claude・Cursor・ChatGPTの使い分け
今回の作業では3つのAIを使い分けました。
Claude（このチャット）：
対話形式で状況を整理しながら進める
→「次にCursorに投げるプロンプトを作る」役割
Cursor（コードエディタ）：
コードの構築・修正を担当
→ ChatGPTのAPIモデルで動作
ChatGPT（Cursorのモデル）：
Cursor内でコードを生成する
Cursorだけで何度も同じ質問を繰り返すと重くなってきます。また、エラーの状況をうまく説明するプロンプトを自分で書くのも難しい。
そこでClaudeを挟んでCursorに投げるプロンプトを作ってもらいながら進めることで、効率的に作業できました。
AIを使いこなすために大切なこと
今回の経験から感じたことを一言で言うと：
AIに最初から完璧を期待せず、一緒に原因をつぶしていく姿勢が大切。
AIは「答えを出す機械」ではなく「一緒に考えるパートナー」として使う方が、結果的にうまくいきます。
個別記事ページが完成した
問題が解決し、個別記事ページが正しく表示されるようになりました。
✅ タイトル表示
✅ 公開日表示
✅ アイキャッチ画像表示
✅ 本文（見出し・リスト・段落）表示
ただし現時点では：
❌ ヘッダー・グローバルナビ
❌ サイドバー
❌ フッター
❌ 関連記事
❌ 著者表示
これらはまだありません。次回以降で整えていきます。
次回予告
次はレイアウトコンポーネント（ヘッダー・フッター）を追加して、サイト全体の見た目を整えていきます。引き続き全部見せていきます。
bizinets.life｜AIと一緒にサイトを育てる実験記録