带有 supabase 的多个 nextjs 参数用于动态路由答案

【问题标题】：Multiple nextjs params with supabase for dynamic routing带有 supabase 的多个 nextjs 参数用于动态路由
【发布时间】：2022-09-26 14:50:45
【问题描述】：

我已经用 supabase 开始了一个小项目（学习 Nextjs）并且遇到了一个小障碍。基本概述是我有一个商店表（名称、电子邮件、地址、slug）和一个社交表（FK store => stores.id、name、url），它通过 store => stores 上的外键链接。 ID。每个商店都应该在应用程序中有一个单独的页面，我将在其中显示他们的信息和他们的社交帐户。

我首先创建了一个动态路由 [id].tsx：

export async function getServerSideProps({ params }) {
    const { data: store, error } = await supabase
        .from(\'stores\')
        .select(\'*, socials(*)\')
        .eq(\'id\', params.id)
        .single();

    if (error) {
        throw new Error(error.message);
    
    }

  return {
    props: {
        store
    },
  }
}

以上工作在我的导出默认函数 Store ({store})我可以通过转到 localhost:3000/1 来查看商店信息（目前仅设置商店）。不幸的是，这确实导致了我的障碍。我希望 \'1\' 成为实际的存储块（存储表中的列），例如 localhost:3000/lorem-ipsum，但在存储 ID 上保留两个表之间的关系。

我知道原始示例中的参数是 id，如果我想要 slug，我应该将我的文件重命名为 [slug].tsx，我的参数将是 params.slug。是否可以在我的参数中同时使用 id 和 slug 并且仍然让我的查询/路由成功？

我想我真正想要的是保持我的表之间的关系，但使用 slug 来查询数据（仅用于 url）。我可以让 FK 成为商店的蛞蝓，但我知道这可能不是正确的举动，因为蛞蝓可能会在路上发生变化。

标签： next.js supabase

【解决方案1】：

id 只是路径中任何内容的变量。如果您希望路由使用 slug，您只需更改过滤器以搜索 slug .eq('slug', params.id)

【讨论】：