Nextjs change url of dynamic path

Question

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

Does this answer your question: [How to generate static pages with nested dynamic routes](https://stackoverflow.com/questions/65550644/how-to-generate-static-pages-with-nested-dynamic-routes)? — juliomalves, Oct 03 '22 at 22:19

Tushar Shahi · Accepted Answer · 2022-10-03T20:29:53.543

2

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

edited Oct 03 '22 at 20:29

answered Oct 03 '22 at 19:38

Tushar Shahi

16,452
1
18
39

1

OP would also need to define those `params` in `getStaticPaths`. – ivanatias Oct 03 '22 at 20:18
1

@ivanatias true. Thanks for pointing out, i think i should add that – Tushar Shahi Oct 03 '22 at 20:25
running into this: A required parameter (city) was not provided as a string in getStaticPaths for /[city]/[date]/[artist] I feel like im close, folder structure is as follows ```/ [city] [date] [artist].js – PDANGER Oct 03 '22 at 21:50

score 1 · Answer 2 · answered Oct 03 '22 at 22:44

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.

Nextjs change url of dynamic path

2 Answers2