基于cookie和supabase有条件地呈现UI会影响我程序的其余部分Next.js 13

l3zydbqr  于 2023-08-26  发布在  其他
关注(0)|答案(1)|浏览(82)

我正在尝试有条件地呈现一个帐户按钮时,用户进行身份验证;当用户未通过身份验证时,呈现登录+注册按钮,如下所示:
我的DesktopBar.tsx文件

import { getUser } from "@/app/_actions/userActions.ts"
import { NavItem } from "@/components/NavItem"

export async function DesktopBar() {
  const user = await getUser()
  return (
    <div className="hidden md:flex md:w-full md:justify-between md:p-6">
      <div className="flex items-center">
        <NavItem key="home" page="/" text="home" className="text-4xl" />
      </div>
      <div className="flex items-center">
        {user ? (
          <NavItem key="/account" page="/account" text="Account" />
        ) : (
          <>
            <NavItem key="/login" page="/login" text="Login" />
            <NavItem key="/sign_up" page="/sign_up" text="Sign Up" />
          </>
        )}
      </div>
    </div>
  )
}

字符串
我的userActions.ts文件

export async function getUser() {
     const { data: user } = await supabase
        .from("users")
        .select("name, is_admin")
        .single()
    return user
    
}


运行此代码时,刷新页面时一切都按预期工作。登录后,在JS加载之前,在我的导航栏中显示Account,当我通过验证时
当我尝试使用自定义搜索表单组件导航到通过generateStaticParams()生成的页面时,就会出现问题。
我的SearchForm.tsx文件

"use client"

import { useRouter } from "next/navigation"

export function SearchForm() {
  const router = useRouter()

  function onSubmit(data) {
    router.push(`${data[0]}/${data[1]}/${data[2]}`)
  }

  return (
      <form onSubmit={onSubmit}>
        <Button type="submit">Search 🔍</Button>
      </form>
  )
}


这是表单的一个简单抽象,您只需要知道它从一个选择框中接收三个输入,然后通过router.push()将用户路由到该路由。
用户路由到此路由:/[a]/[b]/[c]/page.tsx

import { FC } from "react"

export const revalidate = 20

interface pageProps {
  params: { a: string; b: string; c: string }
}

const page: FC<pageProps> = async ({ params }) => {
  const { a, b, c } = params
    // some logic happens...
}
// generate a combination of pages statically
export function generateStaticParams() {
  const combinations = []

  for (const a of letter1) {
    for (const b of letter2) {
      for (const c of letter3) {
        combinations.push({ a, b, c })
      }
    }
  }
  return combinations
}
export default page


当我注解掉generateStaticParams()方法时,一切似乎都正常了。但是我有很多动态页面,并且仍然希望在构建时静态地生成它们,而不是**动态地导航到它们。
我得到的错误消息是Dynamic Server usage: cookies。但是我不希望来自Desktopbar.tsx的代码影响/[a]/[b]/[c]/page.tsx
最后,这里是我的根layout.tsx,我在这里呈现桌面栏。

import "@/styles/globals.css"
import DesktopBar from "@/components/DesktopBar"

export default function RootLayout({ children }) {
  return (
    <html>
      <body className>
          <DesktopBar />
          <main>{children}</main>
      </body>
    </html>
  )
}

cld4siwp

cld4siwp1#

尝试从使用cookies函数的任何路由导出以下内容:

export const dynamic = "force-dynamic";

字符串

相关问题