個別記事ページが表示されない原因を複数のAIで追いかけた話【実践記#6】

2026/3/7

対象読者： AIを使ってサイト制作に挑戦しているけどエラーで詰まっている個人事業主・中小企業のWeb担当者

今回やったこと

Sanityで記事を投稿したあと、個別記事ページに移動できないという問題が発生しました。

「続きを読む」ボタンを押してもトップページが表示される。URLだけ変わっているのに、内容はトップページのまま。何度修正しても同じ現象が続きました。

個別ページへの遷移ができない現象が、何度修正しても解決しませんでした。

AIに原因を聞いて修正→再デプロイ→確認→また同じ現象、というループが続きました。内容は全く分かっていないので「早く解決しないかなぁ」と思いながらAIに任せていました（笑）。

いくつかの原因候補をひとつずつつぶしていく中で、最終的に判明した原因がこれでした。

// 問題のあったvercel.json
{
"version": 2,
"builds": [
{ "src": "package.json", "use": "@vercel/next" }
]
}

この builds の設定がNext.jsの動的ルーティングを壊していたのです。

以下に書き換えるだけで解決しました：

{
"framework": "nextjs"
}

たった1行の変更でした。

ここで正直に言います。

AIに任せれば最初から完璧に答えてもらえると思っていたら、イライラしていたかもしれません。

ただ、問題が最初からハッキリしていることばかりではないのは、AIだろうが人間だろうが同じです。考えられる原因をひとつずつつぶしていく必要があります。

今回もいくつかの候補の中から、最後に正解を引いた感じでした。

それでも、vercel.jsonのbuilds設定って何？ というレベルの自分でも解決できたのは、AIのおかげです。AIをきちんと使いこなせれば、非エンジニアでも解決できるということです。

今回の作業では3つのAIを使い分けました。

Claude（このチャット）：
対話形式で状況を整理しながら進める
→「次にCursorに投げるプロンプトを作る」役割

Cursor（コードエディタ）：
コードの構築・修正を担当
→ ChatGPTのAPIモデルで動作

ChatGPT（Cursorのモデル）：
Cursor内でコードを生成する

Cursorだけで何度も同じ質問を繰り返すと重くなってきます。また、エラーの状況をうまく説明するプロンプトを自分で書くのも難しい。

そこでClaudeを挟んでCursorに投げるプロンプトを作ってもらいながら進めることで、効率的に作業できました。

今回の経験から感じたことを一言で言うと：

AIに最初から完璧を期待せず、一緒に原因をつぶしていく姿勢が大切。

AIは「答えを出す機械」ではなく「一緒に考えるパートナー」として使う方が、結果的にうまくいきます。

問題が解決し、個別記事ページが正しく表示されるようになりました。

✅ タイトル表示
✅ 公開日表示
✅ アイキャッチ画像表示
✅ 本文（見出し・リスト・段落）表示

ただし現時点では：

❌ ヘッダー・グローバルナビ
❌ サイドバー
❌ フッター
❌ 関連記事
❌ 著者表示

これらはまだありません。次回以降で整えていきます。

次はレイアウトコンポーネント（ヘッダー・フッター）を追加して、サイト全体の見た目を整えていきます。引き続き全部見せていきます。

bizinets.life｜AIと一緒にサイトを育てる実験記録

bizinets.biz

bizinets.biz では、ビジネスの仕組みづくりを体系的に学べるコンテンツを用意しています。まずは一度、覗いてみてください。