Supabase統合

SupabaseはオープンソースのFirebase代替サービスで、Backend-as-a-Service (BaaS)機能を提供します。データベース、認証、ストレージ、リアルタイム機能などを含み、開発者が素早くアプリケーションを構築できるよう支援します。

Next.devテンプレートでは、Supabaseのデータベースと認証サービスを使用しています。これらのうち、SupabaseのAPIキーの取得は、テンプレートにとって必要なステップです。

次に、Nexty.devテンプレートにおけるSupabaseの統合プロセスを紹介します。

登録とプロジェクト作成

1. Supabase公式ウェブサイトを訪問してください。前のステップで作成したドメインメールを使用して登録できます。

2. 登録後、「new project」をクリックしてください

3. プロジェクト情報を入力し、「Create new project」をクリックしてください。

データベース初期化

Nexty.devテンプレートを宣伝する際、私は「テンプレートにはxx機能が組み込まれています」と強調しています。これらの機能の基盤は、実際には完全なデータベース構造設計から来ています。

コードリポジトリのdataフォルダにすべての必要なSQLファイルを提供しています。これらのファイルを実行するだけでデータベース初期化が完了します。

💡

包括的なデータベース設計は、Nexty.devテンプレートの主要な特徴の1つです。私たちのSQLファイルには、基本的なテーブル構造定義だけでなく、完全なIndexes（インデックス設計）、Triggers（トリガーロジック）、Functions（関連機能）、Policies（権限設計）も含まれています。 私が知る同様のテンプレートの中で、こうした包括的なデータベース設計を提供しているのはNexty.devだけです。

SQL Editorを開き、「Create a new snippet」をクリックして、dataフォルダ内のすべてのSQLファイルを順番に実行してください

実行後、Table Editorを開くと、Nexty.devテンプレートに組み込まれたすべてのテーブルが表示されます。

Databaseモジュールを開くと、設計されたすべてのIndexes、Triggers、Functions、Policiesを確認できます。

Supabase Authの設定

Nexty.devテンプレートはデフォルトで3つのログイン方法をサポートしています：Google OAuth、GitHub OAuth、そしてSupabase AuthによるEmail Magic Linkです。

メールログイン

Supabase Authはデフォルトでメールログインを有効にしていますが、デフォルトのリンク有効期限は1時間です。一般的には10分に変更することをお勧めします。

「Email」項目をクリックしてメール設定パネルを開いてください

「Email OTP Expiration」の値を600に変更し、「Save」をクリックしてください

Githubログイン

「Github」項目をクリックしてGithub設定パネルを開いてください

「Enable」ボタンをクリックしてGithubログインを有効にし、「Callback URL」をコピーしてください

次にGitHubの"OAuth Apps"ページを開き、「New OAuth App」をクリックして新しいOAuth Appの作成を開始してください

「Homepage URL」には将来の本番環境アドレスを入力するか、一時的に開発環境アドレス（例：http://localhost:3000）を設定することができます。「Authorization callback URL」にはコピーした「Callback URL」を入力してください

作成後、「Client ID」が表示されます。「Generate a new client secret」ボタンをクリックして「Client Secret」を生成し、それらをSupabase Authの「Client ID」と「Client Secret」にコピーしてください。

Googleログイン

「Google」項目をクリックしてGoogle設定パネルを開いてください

「Enable」ボタンをクリックしてGoogleログインを有効にし、「Callback URL」をコピーしてください

Google Cloud Consoleを開き、「New Project」をクリックして新しいプロジェクトの作成を開始してください

プロジェクト名を入力し、「Create」をクリックしてください

プロジェクト情報の設定を開始してください

Client IDを作成してください

「Application type」には「Web application」を選択してください。「Authorized JavaScript origins」には、ローカル開発用にhttp://localhost:3000とhttp://localhostを入力してください。「Authorized redirect URIs」には先ほどコピーした「Callback URL」を入力してください

生成された「Client ID」と「Client secret」をSupabase Authの「Client ID」と「Client Secret」にコピーしてください。

Google Cloud Consoleに戻り、Data AccessページでAPIを有効にしてください

リダイレクトURLの設定

ログイン後にユーザーが正しいページにリダイレクトされるようにするため、「URL Configuration」を設定する必要があります。

Site URLには本番環境アドレスを設定し、Redirect URLsには開発環境アドレスを追加して、ローカル開発時に適切なリダイレクトが行われるようにしてください。

APIキーの取得

最終的で最も重要なステップは、APIキーの取得です。

Data APIページで、URL、anonキー、service_roleキーをコピーして、コードの環境変数に設定してください。

# .env.local or .env
 
NEXT_PUBLIC_SUPABASE_URL=""
NEXT_PUBLIC_SUPABASE_ANON_KEY=""
SUPABASE_SERVICE_ROLE_KEY=""

ローカルでのSupabaseデータベース定義の更新

Supabase CLIのインストール：

# macOSまたはLinux
brew install supabase/tap/supabase
 
# Windows
scoop bucket add supabase https://github.com/supabase/scoop-bucket.git
scoop install supabase

インストール完了後、まずCLIにログインします：

supabase login

次に、genコマンドを実行してtypes.tsを生成します：

supabase gen types typescript --project-id <your-project-id> --schema public > lib/supabase/types.ts

<your-project-id>は、ご自身のプロジェクトIDに置き換えてください。

生成コマンド実行時にA new version of Supabase CLI is available ……という更新通知が表示された場合は、以下のコマンドでアップデートを行ってください：

プロジェクトIDが不明な場合は、Supabaseコンソールにログインし、URLバーの/project/の後に表示される文字列がプロジェクトIDとなります。例：https://supabase.com/dashboard/project/<your-project-id>

# macOSまたはLinux
brew upgrade supabase
 
# Windows
scoop update supabase

その他のSupabase CLIコマンドについては、公式ドキュメントをご参照ください。

まとめ

Nexty.devテンプレートが使用するすべてのサードパーティサービスの中で、Supabaseだけが必須です。これは、今すぐソースリポジトリを開始したい場合、他のサードパーティプラットフォームの設定を一時的にスキップして、ソースリポジトリの開始の章から続けて読むことができることを意味します。