マキモノ
Web開発無料✅ 公式検証済みv3.1.0 / 更新

Next.js + Supabase + Vercel 立ち上げ完全自動化MD

新規Webサービスの立ち上げ (GCP/GitHub/Vercel/Supabase のプロジェクト作成〜環境変数〜本番デプロイ) を AI に一気通貫でやらせる指示書。人間の作業はログイン1回だけ。

出品者: オージャスト公式1 DL📖 読込 約499トークン (約1円)💰 コスパ 900
トークン節約メーター86%節約
ゼロからAIに作らせた場合52万トークン
このMDを読ませた場合7.1万トークン

44.9万トークンの節約 (API料金換算で約670円分)。 要件定義・技術調査・試行錯誤ぶんのトークンがまるごと不要になります。※ 出品者申告とレビューに基づく推定値。モデル・タスク内容により変動します。

この巻物について

Next.js + Supabase + Vercel 立ち上げ完全自動化MD」は、Web開発カテゴリのAI指示書(MDファイル)です。新規Webサービスの立ち上げ (GCP/GitHub/Vercel/Supabase のプロジェクト作成〜環境変数〜本番デプロイ) を AI に一気通貫でやらせる指示書。人間の作業はログイン1回だけ。この巻物をAIに読み込ませると、ゼロから設計・調査する場合に比べて 約44.9万トークン(API料金換算で約670円)・86%のトークンを節約できます。

カテゴリ
Web開発
対応AI
claude-code
ライセンス
CC BY 4.0
価格
無料
ゼロから開発時
約52万トークン
この巻物使用時
約7.1万トークン
節約量
約44.9万トークン (約670円)
更新日
2026-07-09

使い方 (AIに渡す3つの方法)

いちばん簡単なのはワンライナー。Claude Code のターミナルに貼るだけです。

⬇ .md をダウンロード
claude "https://makimono-md.vercel.app/api/v1/files/nextjs-supabase-launch/raw を読み込んで、この指示書どおりに実装して"
claude-code#Next.js#Supabase#Vercel#立ち上げ#CI/CDライセンス: CC BY 4.0

中身

Next.js + Supabase + Vercel 立ち上げ完全自動化MD

新規プロジェクトの立ち上げで AI が「このコマンドを実行してください」と人間に投げ返すのを禁止し、 CLI で実行可能な操作をすべて AI 側で完結させるための指示書。

標準シーケンス (人間に頼むのは認証ログインだけ)

1. gcloud / gh / vercel / supabase CLI の認証確認 (未認証なら login 1回だけ依頼)
2. GCP プロジェクト作成 / API 有効化 / サービスアカウント作成 → gcloud で完結
3. Supabase プロジェクト作成 + migration → supabase CLI で完結
4. GitHub repo 作成 + push → gh CLI で完結
5. Vercel link + 環境変数投入 + 本番デプロイ → vercel CLI で完結

指示書に含まれるルール

  • CLI 未インストールは AI が自分で入れる (winget / npm i -g の対応表つき)
  • 環境変数の投入コマンド集 (vercel env add, gh secret set, supabase secrets set)
  • 検証まで AI 側で完結: デプロイ後に vercel inspect で Ready 確認 → 本番 URL を curl して レスポンス検証 → そこまでやってから完了報告する報告テンプレート
  • やってはいけない集: Web UI クリック手順の案内 / 「あとは確認してください」型の丸投げ

プロジェクト構成テンプレ

App Router + TypeScript + Tailwind + Supabase (RLS 有効) + Playwright e2e の初期構成、 package.json の verify スクリプト (typecheck + unit + e2e 一括) を含む。

よくある質問

「Next.js + Supabase + Vercel 立ち上げ完全自動化MD」とは何ですか?

新規Webサービスの立ち上げ (GCP/GitHub/Vercel/Supabase のプロジェクト作成〜環境変数〜本番デプロイ) を AI に一気通貫でやらせる指示書。人間の作業はログイン1回だけ。

どれくらいトークン(費用)を節約できますか?

ゼロから開発すると約52万トークンかかりますが、この巻物を使えば約7.1万トークンで済みます。差し引き約44.9万トークン(API料金換算で約670円)・86%の節約です。

どうやって使いますか?

無料です。MDファイルを Claude Code などのAIに読み込ませるだけ。ワンライナーをターミナルに貼れば実装が始まります。要件定義や技術調査を省いて実装だけにトークンを使えます。

どのAIツールに対応していますか?

claude-code に対応しています。

商用利用できますか?

ライセンスは「CC BY 4.0」です。

🤝 自分でAIを動かすのは、まだ不安…という方へ

この巻物の内容を、AIを使うプロに丸ごと任せることもできます。姉妹サービスAI代行堂なら「LINEで頼むだけで、仕事が完成」。

AI代行堂を見る →

関連する巻物

Web開発無料✅ 公式

投稿の審査キューを「信頼済みだけ自動公開」で捌く設計(なりすまし穴つき)

審査キューに投稿が溜まったまま埋もれる問題を、信頼済み投稿だけ即公開する形で潰す指示書。無検証のキー発行を信頼判定に使うと第三者が自社メールを騙れる穴と、サーバレスで静的公開棚に実行時公開を足す方法、検証10項目まで含む。

89%節約
35.5万トークン (料金換算 約530円)
新着
Web開発無料✅ 公式

DB型サイトを「一覧だけ会員限定・個別ページは残す」に切り替える指示書(Next.js App Router)

自社DBで集客していたサイトが競合のリスト抜き取りに気づいた時の改修手順。名前が並ぶバルクな一覧だけを会員限定にし、個別ページはtitle/H1とCTAを残す。ItemList JSON-LDやsitemapの漏れ、force-dynamic化のコスト副作用、Layer1(HTML)+Layer2(Playwright実描画)の受け入れテストまで含む。

85%節約
17.8万トークン (料金換算 約270円)
新着
Web開発無料✅ 公式

アプリ内「不具合・要望」窓口を全アプリへ標準搭載する

利用者がその場で不具合・要望を送れる窓口を、npm依存ゼロ・CSS非依存・DBなしでも動く形で1コマンド後付けする手順。公開サイト向けの濫用対策、2段検証、配布物として崩してはいけない点まで含む。

97%節約
9.2万トークン (料金換算 約140円)
新着

この巻物、誰かのトークンも救えます

𝕏 で節約レシートをシェア