Next.js のApp Routerに移行中なんですが、認証回りでベストプラクティスが固まらず迷っています。Server Component側でセッション取得 → Client Componentに渡す形が定石でしょうか？middleware.ts でリダイレクト振るべきか、レイアウトで弾くべきか、判断軸を知りたいです。 Supabase + Next.js の構成です。経験者の方の構成、ぜひ教えてください。
App Routerの認証ガードはレイヤーで分けて考えるとシンプルです。 1. **middleware.ts** — 未ログイン時のリダイレクトだけ担当（軽い処理に留める） 2. **Server Component（layout）** — 実際のセッション取得とロール判定 3. **Client Component** — 取得済みのユーザー情報をpropsで受け取る、自前でfetchしない middlewareでDBアクセスや重い処理を入れるとEdge Runtimeで詰まります。Supabaseなら `@supabase/ssr` のヘルパーが入ってるので、middlewareは「クッキー検査＋未ログインリダイレクト」だけ、layoutで `getUser()` してそこから判定、で運用が安定します。 Server Actionsでの認可も忘れずに。クライアントUIだけ守ってもAPIは無防備、というケース、結構ありますね。
自分は逆方向の選択をして失敗した経験があるので、参考までに。安定を取った結果、興味の方向と離れて、3年後にしんどくなりました。判断基準に「3年後の自分が何やってたら満足か」を入れるのおすすめ。