我正在尝试有条件地呈现一个帐户按钮时,用户进行身份验证;当用户未通过身份验证时,呈现登录+注册按钮,如下所示:
我的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>
)
}
型
1条答案
按热度按时间cld4siwp1#
尝试从使用
cookies
函数的任何路由导出以下内容:字符串