我已经克隆了这个存储库https://github.com/vercel/next.js/tree/canary/examples/with-supabase-auth-realtime-db，我想要一个导航栏，它可以根据用户是否登录进行调整。
我编写的代码不起作用，我已按照此教程进行操作-https：//supabase.com/docs/guides/auth/auth-helpers/nextjs#：~：text = %27%27%20%7D）%0A%7D-，客户端%2D侧%20data%20正在使用%20RLS提取%20，-%23
下面是navigation.jsx的代码：

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

const Navigation = () => {
  const user = Auth.useUser(); // fucking issues recognising whay tje fuck this is doing
  if (!user) {
    //signed out
    return (
      <nav class="navbar" role="navigation" aria-label="main navigation">
        <div class="navbar-brand">
          <Link class="navbar-item" href="/">
            <img
              src="https://bulma.io/images/bulma-logo.png"
              width="112"
              height="28"
            ></img>
          </Link>

          <a
            role="button"
            class="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 class="navbar-menu">
          <div class="navbar-start">
            <Link class="navbar-start navbar-item" href="/">
              Home
            </Link>
          </div>

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

        <a
          role="button"
          class="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 class="navbar-menu">
        <div class="navbar-start">
          <Link class="navbar-start navbar-item" href="/">
            Home
          </Link>
        </div>

        <div class="navbar-end">
          <div class="navbar-item">
            <div class="buttons">
              <Link href="/authentication" class="button is-primary">
                <strong>Sign out</strong>
              </Link>
            </div>
          </div>
        </div>
      </div>
    </nav>
  );
};

export default Navigation;

下面是_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 (
    <>
      <Navigation />
      <main>
        <Auth.UserContextProvider supabaseClient={supabase}>
          <Component {...pageProps} />
        </Auth.UserContextProvider>
      </main>
    </>
  );
}