公開日: 最終更新:
執筆・編集：株式会社Nexa 編集部（下書きと機械検査はAI、公開前に人が確認）／約14分で読めます。公式ドキュメント・公式発表などの一次情報を確認したうえで執筆・更新しています。AIツールの仕様や料金は変わることがあるため、導入判断の前に各公式サイトの最新情報もご確認ください。記事の作り方と検査の方針
Claude Code × Next.js + Supabaseで、専門エンジニアなしに47都道府県・3,852件対応の検索ポータルサイトを完成させた事例を紹介します。
- 要点1: 1,242回の会話セッションで要件定義・DB設計・セキュリティ対策・データ投入・デプロイを完結
- 要点2: 初期設定のRLS（行レベルセキュリティ）には重大な欠陥があり、Claude Codeが4つのCritical脆弱性を自己発見して修正
- 要点3: 4つのバックグラウンドエージェントを並列起動し、3,852件のデータを自動投入
対象: Next.jsを使ったWebポータル・サービスサイト構築を検討している経営者・DX推進担当者
今日やること: 自社サービスに必要なデータ項目（テーブル設計）をリストアップし、Claude Codeにアーキテクチャ提案を依頼してみる
確認日: 2026年10月8日（Next.js公式ドキュメント・Supabase公式ドキュメント）
Claude Codeを活用し、Next.js + Supabaseでポータルサイトを一から構築することは、専門エンジニアがいなくても本番品質のWebアプリを完成させられることが実証されています。
「AIツールで簡単なページは作れるけど、データベースを持つ本格的なWebアプリは無理だろう」——そう思っていた方に、この記事は参考になるはずです。
実際の1,242回にわたる会話セッションの記録をもとに、構想から47都道府県・3,852件のデータが揃った検索ポータルサイト完成まで、セキュリティ対策・大量データ投入・フォーム実装を含む全手順を解説します。
Claude CodeでNext.jsポータルサイトを構築した背景
このプロジェクトで作成したのは、あるサービス系の施設（葬儀・斎場カテゴリ）を全国47都道府県で検索できるポータルサイトです。競合となる大手サービスでは、東京23区だけで500件以上の施設を掲載し、エリア検索・料金比較・無料見積もりフォームという機能で成立しています。
競合サービスを調べて見えたビジネスモデル
競合サービスを調査するとわかったのは、ポータルサイトの本質が「電話番号を非公開にして見積もりフォーム経由でリード獲得する」という構造にあるという点です。施設の詳細ページに電話番号は載っておらず、「無料見積もりを依頼する」というCTAボタンだけが置かれています。この設計の意図を理解してからアーキテクチャを考えると、必要なテーブルが明確に見えてきます。
Claude Codeへの最初の指示は「競合サービスのビジネスモデルを参考に、同等のポータルサイトを構築する計画を立てて」という一文でした。Claude Codeは競合サービスの特徴（施設中心の設計・ステップ式見積もりフォーム・CTA統一）を整理し、実装計画を自動生成しました。
StudioではなくNext.js + Supabaseを選んだ理由
ノーコードツール（Studio等）でサイトを作る選択肢もありましたが、あるメディアサイトのWordPress移行事例（StudioからWordPressに移行した全手順 →）で学んだのは、「後から拡張したくなったときにノーコードの限界にぶつかる」という点です。
データベースを持つ検索ポータルでは、施設データの更新・リード管理・エリア別クエリが必須になります。これらを長期的に管理するには、コードベースで管理できる Next.js + Supabase（PostgreSQL）が適しています。
Supabaseは公式に「Next.jsアプリからSupabaseを使う」クイックスタートガイドを用意しており、両者を組み合わせた構成は、AIコーディングツールが生成するフルスタックアプリの定番として広がっています（Supabase公式ドキュメントで確認 →）。
技術スタック選定とアーキテクチャ設計
採用した技術構成は以下の通りです。
| 技術 | 役割 | 選定理由 |
|---|---|---|
| Next.js 14（App Router） | フロントエンド・SSR | Reactベース、SEO対応が強力 |
| TypeScript | 型定義 | Claude Codeが型エラーを自動修正しやすい |
| Supabase（PostgreSQL） | DB・認証・ストレージ | RLS・Row Level Security内蔵、pgvector対応 |
| Vercel | デプロイ | Next.jsとの親和性が最高 |
| Tailwind CSS | スタイリング | クラス名のみで完結、Claude Codeが扱いやすい |
Next.js App Routerを選んだ3つの理由
- SSR（サーバーサイドレンダリング）でSEO対応: エリア別・施設別のページを動的生成しながらもGoogleにインデックスされやすい構造にできる
- Server ActionsでAPIルート削減: フォーム送信処理をサーバーアクションで記述でき、APIエンドポイントを別途作る必要がない
- Claude Codeとの相性: App RouterのファイルベースルーティングはClaude Codeが理解しやすく、「このページを追加して」という指示が通りやすい
Supabaseのテーブル設計
主要なテーブルは4つです。Claude Codeが競合サービスの機能要件を整理したうえで以下の構造を提案しました。
| テーブル | 役割 | 主なカラム |
|---|---|---|
| venues（施設） | 施設マスタ | name, address, price_from, area_id, is_active |
| areas（エリア） | 都道府県・市区町村 | name, slug, level（1:都道府県 / 2:市区町村）, parent_id |
| leads（リード） | 見積もり依頼 | venue_id, contact_name, email, budget |
| providers（事業者） | 施設運営会社 | name, contact_email, is_verified |
ポイントarealsテーブルのlevelカラムで都道府県（level=1）と市区町村（level=2）を管理し、parent_idで親子関係を持たせる設計がポイントです。エリア検索時に「東京都 > 渋谷区」という階層クエリが可能になります。
ローカル開発環境からリモートSupabaseへのマイグレーション
開発初期はローカルのSupabase CLIで作業し、supabase db pushでリモートに反映します。Claude Codeはマイグレーションファイル（SQLファイル）を自動生成し、テーブル作成・インデックス設定・RLSポリシー設定を一括で管理します。
# ローカルDB適用
supabase db push
# リモートへ反映
supabase link --project-ref [プロジェクトID]
supabase db push実際のセッションではリモートプロジェクトのリンク設定で一時詰まりましたが、Claude Codeがsupabase projects listで自動的にプロジェクトIDを取得して解決しました。
AI導入に関するお困りごとは、株式会社NexaのAI顧問がサポートします。「何から始めればいいか分からない」という段階からご相談いただけます。
セキュリティ対策——Claude Codeに任せる前にやるべきこと
ここが今回の事例で最も重要なポイントです。Claude Codeに「セキュリティチェックをしてから実装して」と依頼したところ、初期マイグレーションファイルに4つのCriticalレベルの脆弱性が発見されました。
発見された4つのセキュリティ問題
| 重大度 | 問題 | 箇所 | リスク |
|---|---|---|---|
| Critical | RLSが緩すぎる | venues/providerのINSERT/UPDATE | Supabaseに登録した全ユーザーが書き込み可能 |
| Critical | DELETE RLS未定義 | venuesテーブル | 誰でも施設データを全削除できる |
| High | XSS脆弱性 | website URLフィールド | javascript: スキームのURLが通過する |
| Medium | 入力長バリデーション未設定 | フォーム全般 | 無制限テキスト送信が可能 |
最大の問題は「auth.role() = 'authenticated'というRLSポリシーが緩すぎること」でした。これはSupabaseに登録した全ユーザーが施設データを書き換えられる状態を意味します。Supabase公式のRow Level Securityガイドでも「公開（exposed）スキーマ内でRLSを有効にしていないテーブルは、権限を持つ任意のロールから読み書きができる」と明記されており（Supabase公式ドキュメントで確認 →）、今回のケースはこの典型的な設定漏れに該当します。Claude Codeはこの問題を指摘するだけでなく、管理者のみ書き込み可能なポリシーに自動修正しました。
Claude Codeが実装したバリデーション強化
// URLバリデーション（XSS対策）
function sanitizeUrl(url: string | null): string | null {
if (!url) return null;
const lower = url.toLowerCase();
if (!lower.startsWith('http://') && !lower.startsWith('https://')) {
return null; // javascript: スキームなどを除外
}
return url;
}
// 入力長制限（例: 施設名は100文字まで）
if (venueName.length > 100) {
throw new Error('施設名は100文字以内で入力してください');
}この修正はClaude Codeが自律的に行いました。「セキュリティチェックして」という一言の指示から、コードの問題点特定→修正→テストまで自動実行されます。
重要なのは、「Claude Codeに任せれば大丈夫」という思い込みで最初のセキュリティレビューを省略しないことです。特にデータを外部に公開するポータルサイトでは、初期設計の段階でセキュリティチェックを依頼する習慣が不可欠です。
47都道府県・3,852件のデータ投入——並列エージェントによる自動化
ポータルサイトの価値はデータ量です。東京都渋谷区だけで12件の施設情報があった競合サービスに対して、「同等のデータカバレッジが必要だ」という判断から大量データ投入を実施しました。
エリアデータの構造設計と一括投入
まず都道府県47件（level=1）と主要市区町村（level=2）をareasテーブルに投入します。Claude Codeはこの投入用のPythonスクリプトを自動生成し、Supabase APIを使って一括送信しました。
# Claude Codeが生成した都道府県一括投入スクリプト（抜粋）
prefectures = [
{"name": "北海道", "slug": "hokkaido", "level": 1},
{"name": "青森県", "slug": "aomori", "level": 1},
# ... 47都道府県分
]
response = supabase.table("areas").insert(prefectures).execute()4エージェント並列でのデータ投入
施設データ（venuesテーブル）は全国で3,852件必要です。逐次投入では時間がかかるため、Claude Codeは4つのバックグラウンドエージェントを自律的に起動して並列処理を実行しました。
| エージェント | 担当地域 | 目標件数 |
|---|---|---|
| Agent 1 | 福岡県 | 200件 |
| Agent 2 | 佐賀・長崎・大分 | 180件 |
| Agent 3 | 熊本・宮崎 | 150件 |
| Agent 4 | 鹿児島・沖縄 | 140件 |
ただし、並列エージェントには権限エラーが発生することがあります。今回も全4エージェントがBashツールの権限エラーで止まりました。この場合はメインセッションのClaude Codeが直接処理を引き受け、段階的にデータを投入していきました。
実務で押さえるポイント並列エージェントを使う場合は、各エージェントが独立したスクリプトとして動けるよう、依存関係を排除した設計にしておくことが重要です。エラー発生時のフォールバック先（メインセッションへの引き継ぎ）もあらかじめ計画しておきましょう。
投入後の件数確認
全データ投入後、psqlで正確な件数を確認しました。
# 全施設データの件数確認
ssh conoha 'psql -d $DATABASE_URL -c "SELECT COUNT(*) FROM venues WHERE is_active = true;"'
# 結果: 3852最終的に47都道府県・3,852件のデータを保有するポータルサイトが完成しました。
一問一答ステップ式見積もりフォームの実装
競合サービスの差別化ポイントの一つが「ステップ式の見積もりフォーム」です。電話番号・住所・要望などを一画面で入力させるのではなく、「いつ頃ご利用予定ですか？」→「ご予算はどのくらいですか？」→「連絡先を教えてください」と段階的に案内することで、離脱率を下げてリード獲得率を高める設計です。
ステップ式フォームのコンポーネント構造
Claude CodeはReactのuseStateを使ったステップ管理とアニメーション付きのUI遷移を自動実装しました。
// Claude Codeが生成したステップフォームの骨格（抜粋）
const [currentStep, setCurrentStep] = useState(1);
const [formData, setFormData] = useState<EstimateFormData>({});
const steps = [
{ id: 1, question: 'ご利用予定時期をお聞かせください' },
{ id: 2, question: 'ご予算の目安をお聞かせください' },
{ id: 3, question: 'ご連絡先をお聞かせください' },
{ id: 4, question: 'ご要望があればお聞かせください' },
];入力バリデーションの自動実装
メールアドレス・電話番号・テキスト長の検証もClaude Codeが一括実装しました。フロントエンド側でのリアルタイムバリデーションと、Supabase関数側での二重チェックを組み合わせることで、無効なデータがDB に保存されるのを防いでいます。
Claude Codeでのポータルサイト構築——3つの成功ポイント
1,242回の会話から見えてきた、Claude CodeでのWebアプリ開発を成功させる3つのポイントを整理します。
1. 計画書の詳細さがアウトプットの品質に直結する
最初の指示に「ビジネスモデル・競合サービスの特徴・必要な機能一覧・CTAの設計方針」まで盛り込んだ詳細な実装計画書を渡したことで、Claude Codeは的外れな提案なく実装を進めました。「ポータルサイトを作って」という一言では到底同じ結果は出ません。
指示書には以下を含めることを推奨します。
- 競合サービスの名前と特徴（参考にしたい設計の具体例）
- 必要なテーブルとそれぞれの役割
- 電話番号を非公開にする等のビジネスルール
- CTAのリンク先とフォームの仕様
2. セキュリティ・バリデーションはClaude Codeに積極的に任せる
「セキュリティチェックして」という一言で、RLS設定・XSS対策・入力バリデーションまで一括レビューと修正を実行します。人間がコードを一行ずつ確認するよりも、Claude Codeに体系的なセキュリティチェックを依頼するほうが漏れがありません。
ただし、チェックを依頼するタイミングは実装完了後ではなく「実装前」です。マイグレーションファイルの段階でセキュリティレビューを挟むことで、後から修正が難しい問題を事前に防げます。
3. 並列エージェントで大量処理の速度を上げる
データ投入・テスト生成・ドキュメント作成など、独立して進められるタスクは並列エージェントで同時処理します。今回の事例では、九州・沖縄8県のデータ投入に並列4エージェントを活用し、処理時間を大幅に短縮しました。
並列エージェントが権限エラーで止まった場合は、メインセッションが引き継ぐことを想定した設計にしておきましょう。
＼ AI活用の「次の一手」を一緒に考えませんか ／
AI顧問の無料相談はこちらよくある質問
Q. Claude CodeだけでNext.jsポータルサイトは本当に作れますか？
本番公開可能な品質のポータルサイトを作れます。ただし、Claude Codeはコードを書く道具であり、「何を作るか」の設計判断は人間が行う必要があります。要件定義・競合調査・ビジネスモデルの整理を事前に行い、詳細な指示書を用意することが品質の鍵です。
Q. Supabaseのセキュリティ設定はClaude Codeが対応できますか？
対応できます。RLS（Row Level Security）ポリシーの設定・修正、入力バリデーションの実装、XSS対策まで、「セキュリティチェックして」という指示で一括対応します。ただし、セキュリティ要件は事前にClaude Codeに伝えたうえでチェックを依頼することが重要です。
Q. 大量データの投入はどうやって自動化しましたか？
Claude CodeがPythonスクリプトを生成し、Supabase APIを使って一括投入する方式を使いました。3,852件の施設データも、スクリプトを実行するだけで数分で完了します。都道府県・市区町村など階層構造のあるデータは、親IDを先に投入してから子データを入れる順序管理が重要です。
Q. Next.js + Supabase + Vercelの構成は、どこで公式の手順を確認できますか？
Next.jsの公式ドキュメント（App Routerのインストール・導入手順）と、Supabaseの公式クイックスタート「Next.jsアプリからSupabaseを使う」で、最新の手順を確認できます。本記事で紹介した設計は2026年3月時点のものなので、実際に着手する際は公式ドキュメントの最新バージョンとの差分がないか確認してください。
Q. RLS（行レベルセキュリティ）を設定しないとどうなりますか？
Supabase公式のドキュメントでは、公開（exposed）スキーマ内でRLSを有効化していないテーブルは、権限を持つ任意のロールから読み書きができる、と明記されています。本記事の事例でも、この設定漏れがCriticalな脆弱性としてClaude Codeに検出されました。公開前に、テーブルごとのRLSポリシーが意図通りか必ず確認する必要があります。
まとめ
Claude Code × Next.js + Supabaseで、47都道府県・3,852件の施設データを持つ検索ポータルサイトを構築した事例を解説しました。
- 技術スタック: Next.js App Router + TypeScript + Supabase（PostgreSQL）+ Vercelが2026年の個人・中小企業開発の標準構成
- セキュリティ: 実装前のセキュリティチェック依頼が必須。Claude CodeはCritical脆弱性の自己発見から自動修正まで対応
- 大量データ投入: 4並列エージェントを使った自動化で、手動では数日かかる作業を短時間で完了
「社内データをWebポータルとして公開したい」「施設・商品・サービスの検索サイトを作りたい」という課題を持つ企業にとって、Claude CodeとNext.js+Supabaseの組み合わせは現実的な選択肢です。
法人向けAI導入・活用の月額伴走サービス
AI導入の疑問を、週1回のMTGで相談できる「AI顧問」
株式会社Nexaでは、ChatGPT・Claude・Claude CodeなどのAI導入に関する質問や、社内活用・業務自動化の進め方を週1回相談できる 月額7万円（毎月3社限定で月額5万円）のAI顧問サービス を提供しています。
「自社では何から始めるべきか」「この業務はAI化できるか」「どのツールを選ぶべきか」を、無料相談で整理します。
この記事で参照した外部情報
- Supabase公式ドキュメントで確認 →supabase.com
- Supabase公式ドキュメントで確認 →supabase.com
本文中でリンクしている外部ページの一覧です（自動生成）。最終確認日は本記事の最終更新日 2026-10-08 で、リンク先の内容はその後変わることがあります。
AI導入を検討中の方へ
