export default async function Page({
searchParams,
}: {
searchParams?: { [key: string]: string | string[] | undefined };
}) {
// const searchParams = useSearchParams();
const id = searchParams?.p ?? "aaa"; // default value is "1"
console.log(id);
const supabase = createClient();
const { data, error } = await supabase
.from("book")
.select()
.eq("id","asjiofeowef");
console.log(data);
return (
<>
<div className="bg-black md:p-5 md:flex">
<div className="aspect-w-16 aspect-h-9 w-full md:w-8/12">
<Youtube />
</div>
<div className="w-full md:w-4/12 p-5">
</div>
</div>
</>
);
}
字符串
我在app/books/page.tsx
下有这个文件。我想用动态路由而不是参数来获取这本书的id
。
我一直在阅读有关getServerSideProps
和大多数信息,这并没有工作的一些原因。要么我得到"getServerSideProps" is not supported in app/. Read more: https://nextjs.org/docs/app/building-your-application/data-fetching
错误或satisfies GetServerSideProps · ────┬──── ────────────────── · ╰── This is the expression part of an expression statement
我甚至从Nextjs应用程序中复制和粘贴了示例,但没有工作。
我的问题是
- 在使用服务器端渲染时,我如何在URL上传递ID?(app/books/[id]/page.tsx <-这是正确的方法吗?)
- 如何从URL中找到'id'值并使用它?(https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props这个例子没有真正帮助)
- 我如何在上面使用我的SupplyDB类型?
1条答案
按热度按时间k75qkfdt1#
根据你的例子,你可以在你的文件夹结构中创建以下路由:
/app/books/[id]/page.tsx
。然后在你的页面中,你可以通过以下方式访问该属性:字符串
请注意,在发表到stack overflow之前,你应该自己做一些研究。看看应用程序路由器文档here可能就足够了。