⚡

Next.js App RouterとSupabaseで遊んでみた

2024/06/20に公開

Next.js

できたもの

成果物はこちらです。

Next.jsとsupabaseでfrontend-bff-dbのどシンプルな構成にしました。

こだわり

どシンプルですが雑すぎるのは誰の役にも立たないので、Server Actionsを簡易版ですが全てのフォームに使用しています。
（業務ではreact-hook-formやconform、zodなど使ってしっかり安全性を上げていきましょう）

あとは、サーバーサイドでSupabaseのパスワードリセットのリダイレクションを実装しているんですが、あまりないケースなんですかね？リファレンスでも見たことのない部分なので、もしサーバーサイドでパスワードリセットの実装に困っていたら参考にしてもらえると幸いです。

※ドキュメントと実際の関数の返り値が違うため型アサーションをしている部分に関しては自己責任でお願いします。

会員登録画面

ログイン画面

パスワードリセット画面

ログイン後画面

ログアウト機能・パスワード変更機能・パスワードリセット機能

パスワード変更機能はログインユーザーが使用する想定で、

パスワードリセット機能は未ログインユーザーがパスワード再発行に使用する想定です。

実行

Supbase cliインストール

まだインスコしてなかったら以下実行
あればスキップ

brew install supabase/tap/supabase

Supabaseスタート

cd supabase
supabase start
...
supabase % supabase start
Started supabase local development setup.

         API URL: http://127.0.0.1:54321
     GraphQL URL: http://127.0.0.1:54321/graphql/v1
          DB URL: postgresql://postgres:postgres@127.0.0.1:54322/postgres
      Studio URL: http://127.0.0.1:54323
    Inbucket URL: http://127.0.0.1:54324
      JWT secret: super-secret-jwt-token-with-at-least-32-characters-long
        anon key: xxx
service_role key: xxx

API URLとanon keyはのちほど使うためメモ📝します。

Next.jsにSupabaseの情報を設定する

cd nextjs
npm i
cp ./.env.example ./.env.local

メモ📝したAPI URLとanon keyを貼り付けます。

Next.js起動

npm run dev

動作確認

ログイン画面が開いたら、適当なメールアドレスとパスワードを入力してアカウントを作成します。

Supabaseとの連携がうまくいっていると、「メールを送信しました。」と表示されます。

supabaseが用意してくれているメーラー http://127.0.0.1:54324 へアクセスしてメールが届いていることを確認し、メール内のリンクを押すと会員登録成功です。

あとはパスワード変更やログアウトなど試してみてください。

ふりかえりと補足

ふりかえり
supabaseとNext.jsのSSRの相性はとても良くサクッと簡単なアプリなら作れちゃいます。
自分は実務で使う機会がありましたが、開発スピードをグンと短縮でき、新規開発のコストなども相当安くできるため個人的にはかなりオススメです。
ただ、supabaseのセキュリティやNext.jsからsupabaseへアクセスする方法は慎重に設計しないと情報漏洩に繋がる可能性があり危険です。
必ずsupabase RLSやRPCなど使ってデータを守るようにしましょう。
補足
Vercelにデプロイしても動くことは確認できました。
Vercelで使用しているsupabaseは現在、個人情報など怖いため停止しています。
https://github.com/dmorita00/nextjs-supabase-auth

よければcloneしてご自身のVercelで遊んでみてください〜
またなにか気づきがあればお気軽にコメントお待ちしています。

参考

redirectToあたり

SSRあたり