提问人：chichi 提问时间：11/14/2023 更新时间：11/14/2023 访问量：34
如何在Next.js中使用服务器端组件中的动态路由和Supabase？
How to use Dynamic Route in Server Side component with Supabase in Next.js?
问：
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.tsxid
我一直在阅读有关此内容的大多数信息由于某些原因不起作用。要么我遇到了错误，要么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 这个例子并没有真正帮助）
- 我怎样才能使用我的Supabase db类型？
答：
1赞
Fabio Nettis
11/14/2023
#1
根据您的示例，您可以在文件夹结构中创建以下路由：.然后，您可以在页面中通过以下方式访问该属性：/app/books/[id]/page.tsx
interface Props {
params: { id: string };
}
export default async function Page({ params }: Props): Promise<JSX.Element> {
const { id } = params;
return <>ID: {id ?? "1"}</>;
}
请注意，在发布到 stack overflow 之前，您应该自己做一些研究。查看此处的应用程序路由器文档可能就足够了。
评论
1赞
chichi
11/15/2023
我知道我不应该只是来这里寻求帮助。我花了 1-2 天的时间阅读了如何做到这一点，但是使用“使用客户端”或带有“应用程序”或“页面”的服务器端使它有点有趣。id尝试的所有事情都没有奏效。非常感谢您的回答。赞赏！
评论