トップ / 応用の紹介

どう繋がるのか

Phase 6で公開したアプリは、ページを表示するだけです。誰かが書き込んだ内容を、覚えておく場所がありません。その「記憶」を担当するのがデータベースです。

Supabaseは、データベースを1つ、管理画面ごと貸してくれるサービスです。ログイン機能（認証）も同じ場所に付いてきます。

そして接続に使うURLとAPIキーは、環境変数で渡します。ローカルでは .env.local に、本番ではVercelの画面に登録する。6-3で学んだ「置き場所は2つ」が、ここでそのまま実戦になります。5-6の「キーをGitHubに上げない」も、ここで守りとして効きます。

実際にやるとどんな感じか

アプリのコードからは、数行でデータを出し入れできます。

const { data } = await supabase
  .from("posts")
  .select("*");

「posts という表から、全部の行を取り出す」と読めます。この程度の読み方が分かれば、あとの実装はClaudeに任せられます。

**⚠️ 1つだけ、先に知っておいてください。RLS（Row Level Security）という設定を飛ばすと、全データが誰でも読み書きできる状態で公開されます。**個人情報の流出事故として、実際に繰り返し起きています。Supabaseを使う日が来たら、テーブルを作るより先に「RLSとは何か」をClaudeに聞いてください。

始めるなら

• Supabase 公式サイト

アカウント作成から最初のテーブルまでは、Claudeに画面を説明しながら聞くと迷いません。「SupabaseをNext.jsから使いたい。何から始めればいい？」で十分通じます。