Claude Code × Next.jsでポータルサイトを構築した全手順【実例公開】

この記事の著者

株式会社Nexa 代表取締役川島 陸

一橋大学経済学部卒業後、フォーティエンスコンサルティング株式会社（旧 株式会社クニエ）にて法人向けAI導入支援等を経験。独立後、AI系メディア運営やDify/n8nの導入支援を経て、株式会社Nexaを創業。法人向けAI研修・AI導入支援・AI関連メディア運営を手掛ける。

詳しく見る無料相談をする

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）が適しています。

2026年Q1時点で、Vercel上のNext.jsデプロイの45%がSupabaseをバックエンドとして採用しており、SupabaseのBaaSシェアも2025年の12%から28%に上昇しています（tech-insider.org調べ）。この組み合わせは今や個人開発の標準スタックと言えます。

技術スタック選定とアーキテクチャ設計

採用した技術構成は以下の通りです。

Next.js App Routerを選んだ3つの理由

1. SSR（サーバーサイドレンダリング）でSEO対応: エリア別・施設別のページを動的生成しながらもGoogleにインデックスされやすい構造にできる
2. Server ActionsでAPIルート削減: フォーム送信処理をサーバーアクションで記述でき、APIエンドポイントを別途作る必要がない
3. Claude Codeとの相性: App RouterのファイルベースルーティングはClaude Codeが理解しやすく、「このページを追加して」という指示が通りやすい

Supabaseのテーブル設計

主要なテーブルは4つです。Claude Codeが競合サービスの機能要件を整理したうえで以下の構造を提案しました。

ポイント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を取得して解決しました。

Claude Codeを使ったWebアプリ開発について、個別にご相談いただけます。「Next.js + Supabaseでポータルサイトを構築したい」「自社サービスのWeb化を検討している」という段階からでも対応しています。

Claude Code個別指導の無料相談はこちら →

セキュリティ対策——Claude Codeに任せる前にやるべきこと

ここが今回の事例で最も重要なポイントです。Claude Codeに「セキュリティチェックをしてから実装して」と依頼したところ、初期マイグレーションファイルに4つのCriticalレベルの脆弱性が発見されました。

発見された4つのセキュリティ問題

最大の問題は「auth.role() = 'authenticated'という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つのバックグラウンドエージェントを自律的に起動して並列処理を実行しました。

ただし、並列エージェントには権限エラーが発生することがあります。今回も全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エージェントを活用し、処理時間を大幅に短縮しました。

並列エージェントが権限エラーで止まった場合は、メインセッションが引き継ぐことを想定した設計にしておきましょう。

よくある質問

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を先に投入してから子データを入れる順序管理が重要です。

まとめ

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の組み合わせは現実的な選択肢です。

Claude Codeの導入・活用をサポートします

株式会社Nexaでは、Claude Codeを活用した業務自動化・Webアプリ開発の個別指導・企業研修を提供しています。「Next.jsポータルサイトを作りたいが何から始めればいいかわからない」「自社データをWebサービス化したい」という段階からご支援いたします。

Claude Code個別指導の詳細・無料相談はこちら →