Next.js + Supabase动态路由：用Slug替代ID并保留表关联

核心思路 #

不用同时保留id和slug参数，直接通过slug查询店铺就能自动关联对应的socials数据——你的表关联基于stores.id，只要通过slug查到正确的store记录，Supabase的嵌套查询会自动拉取对应socials数据，完全不需要改动外键关联逻辑。

具体步骤 #

1. 修改动态路由文件名：把原[id].tsx重命名为[slug].tsx，让Next.js将URL路径参数识别为slug。

2. 更新数据查询逻辑：在getServerSideProps里，将查询条件从匹配id改为匹配slug，嵌套查询逻辑保持不变：

export async function getServerSideProps({ params }) {
    const { data: store, error } = await supabase
        .from('stores')
        .select('*, socials(*)') // 依然能关联拉取对应socials数据
        .eq('slug', params.slug)
        .single();

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

    return {
        props: {
            store
        },
    }
}

3. 页面组件复用原有逻辑：原export default function Store ({store})可以直接使用，返回的store数据结构完全一致，包含店铺信息和对应的socials数组。

关键说明 #

• 无需同时用id和slug的原因：slug作为店铺的唯一标识（建议在Supabase的stores表给slug字段加唯一约束，避免重复），通过它就能精准定位唯一店铺记录，进而自动关联该店铺的所有socials数据。
• 保留id作为外键是正确选择：slug可能因店铺改名等需求变更，但id是永久不变的主键，用它做外键能避免slug修改导致的关联数据失效问题。

额外优化建议 #

如果未来需要修改slug，可以在Supabase中新增slug_history表记录旧slug，然后在getServerSideProps中先检查旧slug，匹配则重定向到新slug，避免旧URL失效。

内容的提问来源于stack exchange，提问作者Louis Stephens