書こうと思ったきっかけ
この記事を書こうと思ったきっかけは、Next.js(App Router)+Vercel+Supabaseっていうセットで認証機能つきのアプリを作ってデプロイまでしてみました。
Vercel,Supabaseの過去記事とのUIが違う場所があり、環境変数周りやVercel,Supabaseのセッティング周りで手こずりました,,,
1~2年くらい古い記事だとあまり参考にならないことが多々ありまして、
この記事も時間が経つと参考にならない可能性もありますが、備忘録として苦戦した箇所を書いておきます
.env(環境変数）の設定について
まずSupabaseの設定については、以下を設定しないと自分が作ったアプリとSupabaseの連携ができませんでした。参考までに
DATABASE_URL=hogehoge
NEXT_PUBLIC_SUPABASE_URL=fugafuga
NEXT_PUBLIC_SUPABASE_ANON_KEY=hogehogehogehoge
以下各設定時にSupabaseのどこから拾ってきたのか書いておきます
DATABASE_URL
Supabaseの対象のpjの一番上のConnectをクリック後にローカルで動かしたいときはDirect connectionを.envに貼り付けます
※passwordは自身で設定したパスワード（多分Supabase pjのパスワード）
NEXT_PUBLIC_SUPABASE_URL
project setting > DATA API > API SettingのProject URLを添付します
NEXT_PUBLIC_SUPABASE_ANON_KEY
project setting > API Keys > 一番上のものをコピペして貼り付けます
デプロイ後に気をつけること
メール認証時のリンクが変
Authenication > URL Configuration からVercelにデプロイした時のURLをセッティングします
Supabaseを使った2段階認証なんかもこの設定周りが原因でうまくいかないことがあるのでちゃんと設定できているか（localhostになってないか）確認するといいかもしれないです。
なぜかVercel認証画面にリダイレクトされる、、、
こんな↓感じの画面にvercelでデプロイしたホーム画面のURLをブラウザで叩くと必ずリダイレクトされてしまって、？？？だったんですが、これはVercelの設定で解決できます。
VercelのデプロイしたpjでProjetct Setting > Deployments Protection > Vercel Authenticationに遷移して
Vercel AuthenicationをDisableに設定することで解決します
余談
NextAuthとVercelを使って最初はこの認証機能を作ってたんですが、デプロイ関係でコケまくって、結局Next.js(App Router)+Vercel+Supabaseの方が楽にデプロイまで持ってけたので、この組み合わせでデプロイすることにしました。
Supabaseだと2段階認証も簡単に実装できるので、個人的に気に入ってます。