CODEWITHSUNDEEP
javascriptnext.jssupabase
PDANGER
PDANGER

Reputation: 87

Nextjs change url of dynamic path

So I currently have my dynamic path set to show events by id [id].js localhost:3000/event/1

however I'd like it to be: localhost:3000/city/date/title I have all these available in the events database I'm just having trouble wrapping my head around the right way to do this

[id].js

export const getStaticPaths = async () => {
  const { data: events } = await supabase.from("events").select("id");
  const paths = events.map(({ id }) => ({
    params: {
      id: id.toString(),
    },
  }));

  return {
    paths,
    fallback: "blocking",
  };
};

export const getStaticProps = async ({ params: { id } }) => {
  const { data: events } = await supabase
    .from("events")
    .select("*")
    .eq("id", id)
    .single();

  return {
    props: {
      events,
    },
    revalidate: 60,
  };
};```

Upvotes: 0

Views: 1153

Answers (2)

PDANGER
PDANGER

Reputation: 87

Here's what ended up working for me:

  const { data, error } = await supabase
    .from("events")
    .select("city, date, title");

  const paths = data.map((event) => ({
    params: {
      city: event.city,
      date: event.date,
      title: event.title
  }));

  return { paths, fallback: false };
}

export const getStaticProps = async ({ params }) => {
  const { data, error } = await supabase
    .from("events")
    .select("*")
    .eq("city", params.city)
    .eq("date", params.date)
    .eq("title", params.title);

  return {
    props: {
      events: data[0],
    },
  };
};

Perhaps there's a better way of doing it, but this is how I solved my issue at the end.

Upvotes: 1

Tushar Shahi
Tushar Shahi

Reputation: 20376

You are looking for nested dynamic routes

Just create a directory structure like this:

/
   [city]
      [date]
         [title]

For this URL : localhost:3000/delhi/20-09/party your params object would be like :

{ "city": "delhi", "date": "20-09" , title : "party" }

Use like:

export const getStaticProps = async ({ params: { city , date, title } }) => {

Also, getStaticPaths will also need updating. The params you return will include all keys and the code might look like:

export async function getStaticPaths() {
    let paths = await someAsyncMethod();
    //create paths into an array of the shape 
    //{   params : { city : '' , date : '' , title : ''} }[]

    return {
        paths : paths,
        fallback: false
      } 
 }

Upvotes: 2

Related Questions