Cursorに任せたら迷子になった。カテゴリ・タグページが表示されなかった原因と解決までの記録【Tips#1】

#Next.js #Sanity #Cursor

対象読者： SanityとNext.jsでカテゴリページやタグページを実装しようとしてつまずいている非エンジニア

今回やったこと

Sanityのサイトにカテゴリとタグ（トピック）の仕組みを追加しました。作業自体はClaudeがCursorへのプロンプトを作成し、Cursorがコードを実装する流れです。

Sanityスキーマにカテゴリ・タグを追加
カテゴリページ（/category/[slug]）の実装
タグページ（/topic/[slug]）の実装
サイドバーにカテゴリ・タグ一覧を表示

しかし、実装が完了してもカテゴリページを開くと**「記事はまだありません」**と表示され続け、解決まで長い時間がかかりました。

一番長くかかった問題：記事が表示されない

カテゴリとタグのページ自体は表示されるのに、記事が一件も出てきません。

Sanityの投稿画面を確認すると、カテゴリとタグの入力欄はきちんと追加されていました。記事にも設定済みです。Publishボタンも押してあります。

それでも「記事はまだありません」のまま。

原因の特定が難しかった理由

今回の問題は「どこが悪いか」を特定するまでが長かったです。

調査していくうちに、Sanityのデータは完全に正しかったことがわかりました。APIに直接クエリを投げると、カテゴリが紐付いた記事が正しく返ってきていたのです。

つまり問題はSanityではなく、Next.js側のコードにありました。

最終的に判明した原因はこれです。

【正しいフォルダ構造】 app/ ├── category/ │ └── [slug]/ ← categoryの中にある │ └── page.tsx 【実際のフォルダ構造】 app/ ├── category/ ← 空っぽ ├── topic/ ← 空っぽ └── [slug]/ ← categoryと同じ階層にある！ └── page.tsx

page.tsx が正しい場所に存在していなかったのが原因でした。

Next.jsでカテゴリページを動かすには app/category/[slug]/page.tsx というパスが必要ですが、実際にはファイルが全く別の場所に作られていたのです。

Cursorが「正しい」と言い続けた

問題をさらに複雑にしたのが、Cursorが「既に正しい形式になっています。変更は不要です」と繰り返し答えたことです。

フォルダ構造を確認するコマンドを投げても、Cursorは「正しいパスに存在します」と返してきました。しかし実際にcmdで確認すると、ファイルは存在しませんでした。

Cursorはやりすぎる

これは私だけの感覚ではないと思いますが、Cursorはやりすぎる傾向があります。

指示していない箇所まで「善意で」修正してしまったり、「既に正しい」と言いながら実際には違う状態になっていたりします。

親切心からくる行動だと思いますが、結果としてありがた迷惑になることがあります。

根本的な教訓：最初の設計が重要

今回身に沁みたのは、最初の設計段階できちんと指示していなかったことのツケが後から来るということです。

あとから修正しようとすると、原因の特定だけで膨大な時間がかかります。

私はSanityもVercelも知識ゼロの状態で作業しています。だからこそ、ClaudeなどのAIに最初からきちんと指示してもらい、Cursorの手綱を握っておいてもらうことが大切だと感じました。

分かっていない段階では「これだけは最初に決めておくべき」という判断自体が難しい。だからAIとの連携で最初の設計を固めることが、後の余計な苦労を防ぐことになります。

解決のために行ったこと

最終的には以下の手順で解決しました。

① cmdで実際のフォルダ構造を確認

PowerShellではなく、コマンドプロンプト（cmd）で確認することで、実際のフォルダ名が正確にわかりました。

cd C:\Users\uracc\Desktop\bizinets-life-web\app dir /b

② 空のファイルを正しい場所に直接作成

echo. > "app\category\[slug]\page.tsx" echo. > "app\topic\[slug]\page.tsx"

③ Cursorに正しいコードを書いてもらう

空のファイルを作った上で、コードを書いてもらうプロンプトを投げました。「既に存在する」と判断できる状態を先に作ることで、Cursorの誤動作を防ぎました。

④ git push でデプロイ

Cursorへの指示で気をつけること

今回の経験から、Cursorへの指示で意識すべきことをまとめます。

指示は具体的に、ファイルパスまで明示する

× 「カテゴリページを作ってください」 ○ 「app/category/[slug]/page.tsx を新規作成してください」

「変更しない」を明記する

× 何も言わない ○ 「既存のコードは変更・削除しないでください」

完了後に報告させる

「修正後に変更したファイル一覧を報告してください」

Cursorの「正しい」を鵜呑みにしない

Cursorが「既に正しい」と言っても、自分でcmdやターミナルで直接確認する習慣をつけることが大切です。

まとめ

AIを使ったサイト制作では、コードの中身を理解できなくても問題ありません。ただし、「AIが正しいと言っても自分で確認する」という姿勢は必要です。

特にCursorはやりすぎる傾向があります。Claude側でしっかりプロンプトを設計し、Cursorには「最小限の変更だけ」「既存コードには触れるな」という指示を明確に入れることが、余計なトラブルを防ぐ一番の方法です。

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