Next.js + Supabase 自适应导航栏登录状态判断失效问题

你的导航栏无法根据登录状态自适应切换，核心问题集中在上下文作用域、API使用方式、业务逻辑实现这几个方面，具体修复如下：

问题点梳理 #

1. 上下文作用域错误：Navigation 组件渲染在 Auth.UserContextProvider 外部，导致 Auth.useUser() 无法获取用户上下文
2. useUser 使用错误：Auth.useUser() 返回的是包含 user 属性的对象，而非直接返回用户实例
3. 登出逻辑无效：直接跳转到认证页不会触发Supabase的登出操作，需要调用官方提供的登出API
4. React语法错误：React元素的类名需用 className 替代原生的 class 属性

修复后的 _app.js 代码 #

import { Auth } from "@supabase/ui";
import { supabase } from "../lib/initSupabase";
import "./../style.css";
import Navigation from "./components/navigation.jsx";

export default function MyApp({ Component, pageProps }) {
  return (
    <Auth.UserContextProvider supabaseClient={supabase}>
      <Navigation />
      <main>
        <Component {...pageProps} />
      </main>
    </Auth.UserContextProvider>
  );
}

修复后的 navigation.jsx 代码 #

import React from "react";
import Link from "next/link";
import { Auth } from "@supabase/ui";
import { supabase } from "../lib/initSupabase";

const Navigation = () => {
  // 解构获取user对象
  const { user } = Auth.useUser();

  // 实现登出逻辑
  const handleSignOut = async () => {
    await supabase.auth.signOut();
  };

  if (!user) {
    // 未登录状态
    return (
      <nav className="navbar" role="navigation" aria-label="main navigation">
        <div className="navbar-brand">
          <Link className="navbar-item" href="/">
            <img
              src="https://bulma.io/images/bulma-logo.png"
              width="112"
              height="28"
            ></img>
          </Link>

          <a
            role="button"
            className="navbar-burger"
            aria-label="menu"
            aria-expanded="false"
            data-target="navbarBasicExample"
          >
            <span aria-hidden="true">Hello world</span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
          </a>
        </div>

        <div className="navbar-menu">
          <div className="navbar-start">
            <Link className="navbar-start navbar-item" href="/">
              Home
            </Link>
          </div>

          <div className="navbar-end">
            <div className="navbar-item">
              <div className="buttons">
                <Link href="/authentication" className="button is-primary">
                  <strong>Sign up</strong>
                </Link>
                <Link href="/authentication" className="button is-light">
                  Log In
                </Link>
              </div>
            </div>
          </div>
        </div>
      </nav>
    );
  }
  // 已登录状态
  return (
    <nav className="navbar" role="navigation" aria-label="main navigation">
      <div className="navbar-brand">
        <Link className="navbar-item" href="/">
          <img
            src="https://bulma.io/images/bulma-logo.png"
            width="112"
            height="28"
          ></img>
        </Link>

        <a
          role="button"
          className="navbar-burger"
          aria-label="menu"
          aria-expanded="false"
          data-target="navbarBasicExample"
        >
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>

      <div className="navbar-menu">
        <div className="navbar-start">
          <Link className="navbar-start navbar-item" href="/">
            Home
          </Link>
        </div>

        <div className="navbar-end">
          <div className="navbar-item">
            <div className="buttons">
              <button onClick={handleSignOut} className="button is-primary">
                <strong>Sign out</strong>
              </button>
            </div>
          </div>
        </div>
      </div>
    </nav>
  );
};

export default Navigation;

内容的提问来源于stack exchange，提问作者David McGuckin