Next.js と Supabase を組み合わせて、シンプルなログイン機能を実装する方法を解説します。
Supabase は Firebase の代替として注目されている BaaS (Backend as a Service) で、認証機能を簡単に導入できます。
今回は 「Email/Password 認証」 を実装する流れを紹介します。
[目次を開く]
1. Next.js × Supabase でのログイン機能の概要
今回実装する機能：
- サインアップ（新規登録）
- ログイン
- ログアウト
- ログイン状態の取得
2. Supabase のセットアップ
まず、Supabase の公式サイト（https://supabase.com/）にアクセスし、無料アカウントを作成しましょう。
① プロジェクトの作成
- Supabase にログインし、「New Project」を作成
- プロジェクト名・データベースのパスワードを設定
- 作成されたプロジェクトの 「API」タブ から Supabase URL と anon public key を取得
3. Next.js プロジェクトの準備
① Next.js のセットアップ
npx create-next-app -e with-supabase対話型プロンプトでプロジェクト名を聞かれるので「nextjs-supabase-auth」などプロジェクト名を入力してください。
② 環境変数の設定
プロジェクトのルートに .env.local を作成し、以下のように設定：
NEXT_PUBLIC_SUPABASE_URL=（SupabaseのURL）
NEXT_PUBLIC_SUPABASE_ANON_KEY=（anon public key） 作成したプロジェクトのルートでnpm run devを実行してみましょう。
cd nextjs-supabase-auth
npm run dev http://localhost:3000/を開き以下のような画面が表示されていたら成功です。
4. 動作確認
Sign upとSign inができるかテストしてみましょう。
画面右上のSign upボタンをクリックすると以下の画面が表示されるのでアドレスとパスワードを入力してください。
次にSign in画面を開き、先ほど作成したアカウントでSign inできるか確認してみましょう。
Sign inが成功するとダッシュボードが表示され右上に登録したメールアドレスが表示されます。
これだけでログイン機能、いわゆる認証系の機能が一通り揃います。具体的には以下のような機能です。
✅ 新規登録
✅ ログイン
✅ ログアウト
✅ ログイン状態の取得
まとめ
これで、Next.js × Supabase を使ったシンプルなログイン機能の実装ができました。
この仕組みを応用すれば、SNSログイン や メール認証 など、さらに高度な認証機能を追加できます。ぜひ、試してみましょう！
