【Copilotとのたった2回の会話で解決】Next.js × Supabase 認証リダイレクト問題をシンプルに修正した話
Next.js と Supabase を使ってシフト管理アプリを作っていたところ、「ログインしていないとホーム画面が見れない」かつ「ログイン後に勝手に /calendar に遷移する」という状態に陥りました。
今回はこの問題を、GitHub Copilotとたった2回やり取りしただけでスムーズに解決できた体験を共有します。
該当のサイト: https://shift-app-mu.vercel.app/
🐞 問題：ホームページにアクセスできない & 勝手にカレンダーページへリダイレクトされる
現象は次のとおりです：
- ログインしていないと
/（ホームページ）にアクセスできない - ログイン後に
/calendarに自動でリダイレクトされてしまう - ホームページでとどまりたいのに、それができない
💬 Copilotとの会話1：
「ログイン後に勝手に Calendar page に遷移せず、ログイン前後でホームページに止まれるようにしてください」
Copilotの提案：
-
page.tsxにあったuseEffectの自動遷移ロジックを削除 - 代わりに、ログイン状態に応じて表示するボタンを切り替える実装を提案
{session ? (
<Link href="/calendar">
<Button>カレンダーへ</Button>
</Link>
) : (
<Link href="/login">
<Button>ログイン</Button>
</Link>
)}
✅ これにより、自動遷移は止まり、ユーザーが自分でページを選べるように！
💬 Copilotとの会話2：
「loginしていない状態でも home 画面は開けるようにしてください」
Copilotの提案：
-
middleware.tsに定義されていたパブリックルートから/が抜けていたことに言及 -
publicRoutesに/を追加するようにアドバイス
// 修正前
const publicRoutes = ["/login", "/signup"];
// 修正後
const publicRoutes = ["/", "/login", "/signup"];
✅ これにより、ログイン前でも / にアクセスできるように！
✅ 修正結果まとめ
| ステップ | 会話内容 | 修正内容 |
|---|---|---|
| 1回目 | ログイン後に勝手にリダイレクトしないでほしい |
useEffect を削除し、ログイン状態でボタン表示を制御 |
| 2回目 | ログイン前でもホーム画面にアクセスしたい |
middleware.ts の publicRoutes に / を追加 |
✨ 感想：Copilotと話すだけで、複雑な認証フローも解決！
今回のケースでは、どこの部分で問題が起きているのかを説明することで簡単に問題を解決することができました。
一方で、どこの部分でどのような問題が起きているのかを細かく説明する必要性はまだあるので、一度お願いして細かく全てをチェックしてくれるようなお願いはまだできないことを考えるとAIに全ての開発はまだできないなと思いました。