Next.jsにてToDoアプリを作成するにあたり、バックエンドどうしようかGeminiに聞いたところ、Supabaseを提案してくれました。UI構築を担うモダンなフレームワークとの相性が非常に良いとのことで、調べてみました。
Supabaseとは
PostgreSQLをベースにした認証、ストレージなどを提供するオープンソースのバックエンドサービス（BaaS）です。
Supabaseの魅力
- フルスクラッチでバックエンドを書く必要がない
- PostgreSQLが使えるので、データ管理しやすい
- 認証、データベース、ストレージなど、主要な機能が揃っている
多様な認証方法をサポートしており、電子メール/パスワード認証だけでなく、Google、GitHubなどのソーシャルログイン、電話認証も実装できます。
他にもリアルタイム機能として、PostgreSQLのLISTEN/NOTIFYが利用されており、データベース変更をリアルタイムでクライアントへ通知できます。これが大きな強みで、Chatアプリやリアルタイムダッシュボードのようなアプリケーションを作成できるようです。
LISTEN/NOTIFY は、データベース内で発生したイベントを、データベース外のアプリケーションにリアルタイムで通知するための非同期メッセージング機能です。ざっくりと、データベースを「チャットルーム」のように使うための仕組みです。
プラン一覧
| プラン | 料金 | 機能 |
|---|---|---|
| Free Tier | 無料 | 制限付きのストレージ・リクエスト数 |
| Pro Tier | $25/月 | 拡張されたリソースとサポート |
| Enterprise Tier | 要相談 | カスタム機能とサポート、専用のインフラストラクチャ |
無料版では、データベースの最大サイズやリクエスト数、機能、ストレージ容量に制限があります。
使い方
画面右にある “New project” を選択し以下を入力
| Organization | プロジェクトを作成するGithub Organizationを選択 |
|---|---|
| Name | 作成するプロジェクト名 |
| Database Password | データベースのパスワード |
| Region | データベースのリージョン(東京リージョン) |
| Pricing Plan | 料金プラン(無料プラン) |
- 画面左のサイドバーより SQL Editor を選択
- Quick start セクションより、希望の内容(TodoList) をクリック
- 画面右側の Run をクリックし、テーブルを作成する
"Sucess. No rows returned." を確認できたら OK
パッケージの追加
npm install @supabase/supabase-js
データを挿入するためのURLとAPIキーを取得する
- サイドバーの Settings を選択
- Data API より URL をコピーする
-
API keys より
anonpublicの方をコピーする
Supabase プロジェクトで発行される 2 種類の API キー anon service_role key について、実際の使い方や注意点、余裕があれば↓
簡単にまとめると...
- anon key → publishable key
クライアント側で利用。最小限の設計。ユーザーがログインすると、自動的に「authenticated」ロールに切り替わり、ユーザー専用のアクセス権が適用される。
- service_role key → secret key
サーバーサイド専用の特権key。このキーを用いると、データベースに直接アクセスできるため非常に強力だが、取り扱いには細心の注意が必要。必ずサーバーサイド（環境変数）で管理。
Next.jsプロジェクト直下に .envファイルを作成し、APIキーの取得 で取得したURLとAPIキーを記載する
NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
Supabaseクライアントの設定
lib ディレクトリを作成し、その中に supabaseClient.js ファイルを作成して以下の内容を追加します。
import { createClient } from '@supabase/supabase-js';
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
export const supabase = createClient(supabaseUrl, supabaseAnonKey);
ユースケース
ライブダッシュボードとモニタリング
株価の取引システム、地理情報システム（GIS）など
リアルタイム チャットアプリケーション
ライブチャット/メッセージング、共同編集アプリケーションなど
ユーザー認証のあるwebアプリ
企業・チームごとのユーザー隔離、ロールベースのアクセス制御、モバイルアプリの認証など
タスク管理アプリ
など
とにかく認証・データベース・リアルタイム通信など豊富な機能を備えており、Webアプリの開発を大幅に簡略化できます。個人開発などで手軽にサービスを作りたい人、バックエンドを自分で構築したくない人などには良いかと思います！