Multiple nextjs params with supabase for dynamic routing

Question

I have started a small project (to learn Nextjs) with supabase and have hit a small roadblock. The basic overview is I have a table for stores (name, email, address, slug) and a table for socials (FK store => stores.id, name, url) which is linked via a foreign key on store => stores.id. Each store should have a separate page in the app where I will display their information and their social accounts.

I started by creating a dynamic route [id].tsx with:

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
    },
  }
}

The above works just fine in my export default function Store ({store}) and I can see the stores information by going to localhost:3000/1 (only store set up currently). This does lead to my roadblock unfortunately. I would like the '1' to be the actual store slug (column in the stores table) like localhost:3000/lorem-ipsum but keep the relation between the two tables on the store id.

I understand that the params in my original example is id, and if I wanted the slug, I should rename my file to [slug].tsx and my params would be params.slug. Is it possible to utilize both the id and slug in my params and still have my query/route succeed?

I guess what I really want is to keep the relationship between my tables, but use the slug for querying the data (just for the url). I could make the FK the store slug, but I know it probably isnt the right move as the slug could change down the road.

thorwebdev · Accepted Answer · 2022-09-26 06:50:45Z

0

id is just a variable for whatever is in the route. If you want the route to be using the slug, you just need to change the filter to search for the slug .eq('slug', params.id)

answered Sep 26, 2022 at 6:50

thorwebdev

1,2327 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Multiple nextjs params with supabase for dynamic routing

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related