特定のページでログイン状態を判定する方法（Next.js × Supabase）

Next.jsとSupabaseを使ったWebアプリケーションにおいて、特定のページをログイン済みユーザーのみが閲覧できるようにする方法をまとめます。

未ログインの場合はログインページへリダイレクトし、ログイン済みの場合のみページを表示する実装例を紹介します。

管理画面やユーザー専用ページなど、ページ単位で認証制御を行いたい場合に有効な方法です。

実装の概要

• サーバーコンポーネントでSupabaseクライアントを作成
• 認証情報を取得してログイン状態を判定
• 未ログインの場合はログインページへリダイレクト
• ログイン済みの場合のみページを表示

実装例

import { createClient } from "@/lib/supabase/server";
import { redirect } from "next/navigation";

export default async function Page() {
  const supabase = await createClient();

  const { data, error } = await supabase.auth.getClaims();

  if (error || !data?.claims) {
    redirect("/auth/login");
  }

  return (
    <main>
      {/* ログイン済みユーザー向けコンテンツ */}
    </main>
  );
}

import { createClient } from "@/lib/supabase/server";
import { redirect } from "next/navigation";

export default async function Page() {
  const supabase = await createClient();

  const { data, error } = await supabase.auth.getClaims();

  if (error || !data?.claims) {
    redirect("/auth/login");
  }

  return (
    <main>
      {/* ログイン済みユーザー向けコンテンツ */}
    </main>
  );
}

解説

supabase.auth.getClaims()を使って、現在のリクエストに紐づく認証情報を取得しています。

• errorが発生した場合
• claimsが存在しない場合

これらは未ログイン状態と判断し、redirect()を使ってログインページへ遷移させます。

このように実装することで、特定のページだけを認証必須にすることができます。

この方法が向いているケース

• 管理画面や設定ページだけを制限したい
• ページごとに認証の有無を切り替えたい

注意点

• 認証必須ページが増えてきた場合は、Middlewareによる一括制御を検討したほうが保守性が高くなります
• ユーザー情報が必要な場合はgetUser()を使用します