At the moment, my dynamic path is configured to display events by their ID [id].js localhost:3000/event/1
But I would like it to be structured as follows: localhost:3000/city/date/title. All of this information is available in the events database, but I'm struggling to figure out the correct approach for 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,
};
};